如何创建使用 Typescript 传递函数的 React Context

Question

我正在尝试使用 React Context 传递状态的 setter 函数。但是，我收到一个 Typescript 错误“Type 'null' is not assignable to type '(value: number) => void'。”当我尝试为其分配默认值时。

我该如何解决？非常感谢

context.tsx

import React from "react";
import { Movie } from "./movies.service";

export const MoviesContext = React.createContext<{
    movies: Movie[];
    selectedMovie: number;
    setSelectedMovie: (value: number) => void;
  }>({
    movies: [],
    selectedMovie: 0,
    setSelectedMovie: null, // ERROR IS SHOWN HERE
  });

App.tsx

import React, { useState, useEffect } from "react";
import './App.css';
import HomePage from './components/Pages/HomePage';
import { Movie, fetchMovies } from "./services/movies.service";
import { MoviesContext } from "./services/context";
import MoviePage from './components/Pages/MoviePage';

const Router = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Switch = require("react-router-dom").Switch;

function App() {
  useEffect(() => {
    fetchMovies()
      .then(setMovies)
      .catch(() => setMovies([]));
  }, []);

  const [movies, setMovies] = useState<Movie[]>([]);
  const [selectedMovie, setSelectedMovie] = useState(0);

  return (
    <MoviesContext.Provider value={{ movies, selectedMovie, setSelectedMovie }}>
      <div className="App">
        <div className="container typography-base">
          <Router>
            <Switch>
              <Route path="/movie/:movieid" >
              <MoviePage />
              </Route>
            </Switch>
          </Router>
        </div>
      </div>
    </MoviesContext.Provider>
  );
}
export default App;

Answer 1

您的类型期望 setSelectedMovie 是一个函数，但您将默认值设置为 null。尝试提供默认函数实现。

export const MoviesContext = React.createContext<{
    movies: Movie[];
    selectedMovie: number;
    setSelectedMovie: (value: number) => void;
  }>({
    movies: [],
    selectedMovie: 0,
    setSelectedMovie: () => {},
  });

如何创建使用 Typescript 传递函数的 React Context

How to create React Context that passes a function with Typescript

javascript

typescript

reactjs

react-router

react-context