createContext 不接受默认值

Question

我正在尝试使用react API的createContext构建上下文：

import React, { useState, createContext } from 'react';
export const MovieContext =  createContext();
export const MovieProvider = (props) => {
const [movies, setMovies] = useState(
[
{
original_title: 'name of movie',
poster_path: 'path_to_poster',
id: 1
}
]
);
return (
<MovieContext.Provider value={[movies, setMovies]}>
{props.children}
</MovieContext.Provider>
);
}
export default MovieProvider;

createContext()功能显示此错误：

应为1个参数，但得到了0.ts(2554(索引。d.ts(385，9(：未提供"defaultValue"的参数。

如果我将其设为字符串，并将字符串作为应用程序构建的值传递：

export const MovieContext =  createContext('');
<MovieContext.Provider value={''}>
{props.children}
</MovieContext.Provider>

我添加什么样的值作为createContext()参数以使其与useState挂钩一起工作？我正在遵循这个家伙的教程，他用JS来做，但我用TS来构建我的应用程序，所以它有点严格。

Answer 1

这些是Typescript类型，在这里进行了描述。代码中有一条注释，说明为什么需要这个参数，尽管文档中没有说明它是必需的。

function createContext<T>(
// If you thought this should be optional, see
// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106
defaultValue: T,
): Context<T>;

在您的情况下，将正确设置默认参数，如

type IMovie = {
original_title: string;
poster_path: string;
id: number;
};
type IMovieContext = [IMovie[], React.Dispatch<React.SetStateAction<IMovie[]>>];
export const MovieContext = createContext<IMovieContext>([[], () => null]);
export const MovieProvider = props => {
const [movies, setMovies] = useState<IMovie[]>([
{
original_title: 'name of movie',
poster_path: 'path_to_poster',
id: 1,
},
]);
return <MovieContext.Provider value={[movies, setMovies]}>{props.children}</MovieContext.Provider>;
};