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

Question

我有以下代码，但出现此错误（未提供 'defaultValue' 的参数。）。

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

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

属性 'imdbID' 在类型 'never' 上不存在。和
'any[]' 类型的参数不能分配给 'SetStateAction<never[]>' 类型的参数。类型 'any[]' 不能分配给类型 'never[]'。类型 'any' 不可分配给类型 'never'.ts(2345)
'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

React.createContext 需要传递一个默认值，该值将由 Consumer 使用，而不包含在 Provider.

中

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

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

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

// etc.

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'，你会发现调试这些问题会更容易，因为这将允许所有类型通过，然后抛出错误，这是 Typescript 的重点。您可以使用接口在文件顶部定义它，甚至可以在单独的 folder/file 中定义它来存储您的接口和模型：

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

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

Answer 3

您使用的是未定义类型的打字稿，并且到处都使用 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>("");

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

Typescript react An argument for 'defaultValue' was not provided

typescript

reactjs

react-typescript