createContext 不接受 defaultValue

Question

我正在嘗試通過使用來自反應 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() function 顯示此錯誤：

預期為 1 arguments，但得到 0.ts(2554) index.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>;
};