reactjs - Typescript react 未提供 'defaultValue' 的参数

Question

我有以下代码，但出现此错误(未提供“defaultValue”的参数。)。

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

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

1. 类型“never”上不存在属性“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>("");