React Typescript 如何设置状态

Question

我正在尝试使用 react 学习打字稿，现在我很困惑，我将如何设置接口的状态？我的代码示例：

interface Props {
    children: ReactNode | ReactNode[];
}

export interface IMovie {
    title: string;
    video: boolean;
    poster_path: string;
}

export const MoviesContext = createContext<IMovie[] | undefined>([]);

export const MoviesProvider = ({ children }: Props): JSX.Element => {
    const [movies, setMovies] = useState<IMovie[]>();

    return (
            <MoviesContext.Provider value={[movies, setMovies]}>
                {children}
            </MoviesContext.Provider>
    );
};

我得到的错误是“类型 (??ovie[] | Dispatch> | undefined>> 不能分配给类型 IMovie[]”

欢迎任何其他关于更改我的代码的建议。:)

Answer 1

这里的问题是您的上下文定义的值类型 is IMovie，其中在呈现期间传递给您的上下文的类型实际上是一个数组：[movies, setMovies]。

一种解决方案是与您的提供者一起定义和使用一个 prop 接口，它同时携带movies状态以及像这样的电影的 setter：

export interface IMovieProviderProps {
    movies? : IMovie,
    setMovies : (movies:IMovie) => void,
}

IMovieProviderProps然后，此接口将用于定义上下文值的形状，这将提供movies从提供程序外部访问状态和更新状态的方法：

/* Define context with new provider props */
export const MoviesContext = createContext<IMovieProviderProps>(null);

export const MoviesProvider = ({ children }: Props): JSX.Element => {
    const [movies, setMovies] = useState<IMovie>();

    /* Define provider value. Can be done inline, but I've defined
    it here for clarity */
    const providerValue : IMovieProviderProps = {
        movies,
        setMovies
    }

    /* Pass providerValue to provider */
    return (<MoviesContext.Provider value={providerValue}>
        {children}
    </MoviesContext.Provider>);
};

/* Define a hook for this provider, that allows the provided value
to be consumed */
export const useMovies = () => useContext(MoviesContext);

该useMovies钩子允许从项目中的其他地方访问提供者值，并且可以像这样使用：

const ExampleComponent = () => {

     /* Imported useMovies hook defined with provider above, and
     extract the movies state, and movies setter base on the shape
     of IMovieProviderProps */
     const { movies, setMovies } = useMovies();

     return <>
     {JSON.stringify(movies)}
     <button onClick={() => setMovies(null)}>Set Movies</button>
     </>
}

现在需要注意的一个关键点是，上下文现在公开了一个形状为 的对象值，IMovieProviderProps而不是数组值（正如您的代码所期望的那样）。

希望有帮助！