打字稿反应没有提供'defaultValue'的参数

Question

我有以下代码并收到此错误（未提供“defaultValue”的参数。）。

我需要输入一些默认值，但我看不到哪些默认值。

我还遇到了一些其他错误：

1. “从不”类型上不存在属性“imdbID”。和

2. “any[]”类型的参数不能分配给“SetStateAction”类型的参数。 类型 'any[]' 不能分配给类型 'never[]'。 类型 'any' 不可分配给类型 'never'.ts(2345)

3. “any”类型的参数不能分配给“never”类型的参数。ts(2345) （参数）电影：任何

import React, { createContext, useState, useEffect } from 'react';
import axios from 'axios';
export const MovieContext = createContext();


const MovieApp = ({ children }:any) => {
  const [favorites, setFavorites] = useState([]);
  const [movies, setMovies] = useState();
  const [search, setSearch] = useState('');
  const [selectedMovie, setSelectedMovie] = useState('');

  const fetchMovies = async (searchValue) => {
    const response = await axios(
      `https://www.omdbapi.com/?apikey=${API_KEY}&s=${searchValue}`
    );
    const data = response.data;
    setMovies(data.Search);
  };

  const removeFavoriteMovie = (movie:any) => {
    movie.isFavorite = false;
    const newFavoriteList = favorites.filter(
      (fav) => fav.imdbID !== movie.imdbID
    );
    setFavorites(newFavoriteList);
  };

  const addFavoriteMovie = (movie:any) => {
    movie.isFavorite = true;
    const newFavoriteList = [...favorites, movie];
    setFavorites(newFavoriteList);
  };

  const favoriteHandler = (movie:any, e:any) => {
    e.preventDefault();
    if (favorites.includes(movie)) {
      removeFavoriteMovie(movie);
    } else {
      addFavoriteMovie(movie);
    }
  };

  const showDetail = async (id:any) => {
    const response = await axios(
      `https://www.omdbapi.com/?apikey=${API_KEY}&i=${id}`
    );
    const data = response.data;
    setSelectedMovie(data);
  };

  useEffect(() => {
    console.log(API_KEY)
    fetchMovies(search);
  }, [search]);

  return (
    <MovieContext.Provider
      value={{
        setSearch,
        movies,
        favorites,
        favoriteHandler,
        showDetail,
        selectedMovie,
      }}
    >
      {children}
    </MovieContext.Provider>
  );
};

export default MovieApp;

Answer 1

您正在使用 typescript 而不定义类型，并且在任何地方都使用 any。

如果您知道希望从 api 接收的数据的形状，那么创建一些类型以开始在您的组件中使用并不难。

这将解决您问题中的其他 ts 错误。

interface Movie {
  Title: string;
  Year: string;
  Rated: string;
  Released: string;
  Runtime: string;
  Genre: string;
  Director: string;
  Writer: string;
  Actors: string;
  Plot: string;
  Language: string;
  Country: string;
  Awards: string;
  Poster: string;
  Ratings?: RatingsEntity[] | null;
  Metascore: string;
  imdbRating: string;
  imdbVotes: string;
  imdbID: string;
  Type: string;
  DVD: string;
  BoxOffice: string;
  Production: string;
  Website: string;
  Response: string;
}
interface RatingsEntity {
  Source: string;
  Value: string;
}

interface Favorite extends Movie {
  isFavorite?: boolean;
}

然后您可以指定您所在州的类型。

  const [favorites, setFavorites] = useState<Favorite[]>([]);
  const [movies, setMovies] = useState<Movie[]>([]);
  const [selectedMovie, setSelectedMovie] = useState<Movie | null>(null);
  const [search, setSearch] = useState<string>("");

Answer 2

你需要定义你的状态应该是什么类型的数据，例如：

const [movies, setMovies] = useState<TheTypeThatIsReturn>()

// an example of using an array of objects:
const [movies, setMovies] = useState<Array<{id: string, name: string}>>([])

您还应该为电影状态设置一个默认值，因为它当前设置为空，这就是为什么您会收到 'any[] is not assignable to never[] 错误。

如果你停止使用“any”，你会发现调试这些问题会更容易，因为这将允许所有类型通过，然后抛出错误，这是 Typescript 的重点。您可以使用接口在文件顶部定义它，甚至可以在单独的文件夹/文件中定义它来存储您的接口和模型：

interface IMovieModel {
  id: string;
  name: string;
}
const [movies, setMovies] = useState<Array<IMovieModel>>([])

如果您遵循这些步骤，您将修复错误，您还需要对 API 响应或至少要用于阻止 TS 抱怨找不到 ID 的部分建模。

Answer 3

React.createContext 需要传递一个默认值，Consumers 将使用该默认值，Provider 不包含该值。

正如其他人所说，如果你没有分配任何有用的类型，为什么首先使用 Typescript？

type Movie = {
  // ...
}
type MovieContextType = {
  setSearch(value: string): void
  movies: Movie[]
  // ...
}
const movieContext = createContext<MovieContextType>({ /* ... */ })

const MovieApp: React.FC = ({children}) => // ...

// etc.