reactjs - React Typescript 如何设置状态

Question

我正在尝试通过 react 学习 typescript ，我现在很困惑，我将如何设置界面的状态？
我的代码示例:

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>> is notassignable to type IMovie[]”

欢迎对我的代码进行更改的任何其他建议。 :)

Answer 1

这里的问题是定义上下文的值类型是 IMovie ，因为在渲染过程中传递给上下文的类型实际上是一个数组:[movies, setMovies] .

一种解决方案是为您的提供者定义和使用一个 prop 接口(interface)，该接口(interface)同时带有 movies状态以及像这样的电影的 setter :

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

这个 IMovieProviderProps然后接口(interface)将用于定义上下文值的形状，这将提供访问 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钩子(Hook)允许从项目中的其他地方访问提供者值，并且可以像这样使用:

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 的对象值。而不是一个数组值(正如您的代码所期望的那样)。

希望有帮助!