#reactjs #typescript #react-typescript
Вопрос:
У меня есть следующий код, и я получаю эту ошибку (аргумент для значения по умолчанию не был указан.).
Мне нужно ввести некоторые значения по умолчанию, но я не вижу, какие значения по умолчанию.
я также получаю некоторые другие ошибки:
- Свойство «imdbID» не существует для типа «никогда». и
- Аргумент типа «any []» не может быть присвоен параметру типа » SetStateActionlt;никогда []gt;». Тип «любой []» не может быть присвоен типу » никогда []». Тип «любой» не может быть присвоен типу «никогда». ts(2345)
- Аргумент типа «любой» не может быть присвоен параметру типа «никогда». ts(2345) (параметр) фильм: любой
import React, { createContext, useState, useEffect } from 'react'; import axios from 'axios'; export const MovieContext = createContext(); const MovieApp = ({ children }:any) =gt; { const [favorites, setFavorites] = useState([]); const [movies, setMovies] = useState(); const [search, setSearch] = useState(''); const [selectedMovie, setSelectedMovie] = useState(''); const fetchMovies = async (searchValue) =gt; { const response = await axios( `https://www.omdbapi.com/?apikey=${API_KEY}amp;s=${searchValue}` ); const data = response.data; setMovies(data.Search); }; const removeFavoriteMovie = (movie:any) =gt; { movie.isFavorite = false; const newFavoriteList = favorites.filter( (fav) =gt; fav.imdbID !== movie.imdbID ); setFavorites(newFavoriteList); }; const addFavoriteMovie = (movie:any) =gt; { movie.isFavorite = true; const newFavoriteList = [...favorites, movie]; setFavorites(newFavoriteList); }; const favoriteHandler = (movie:any, e:any) =gt; { e.preventDefault(); if (favorites.includes(movie)) { removeFavoriteMovie(movie); } else { addFavoriteMovie(movie); } }; const showDetail = async (id:any) =gt; { const response = await axios( `https://www.omdbapi.com/?apikey=${API_KEY}amp;i=${id}` ); const data = response.data; setSelectedMovie(data); }; useEffect(() =gt; { console.log(API_KEY) fetchMovies(search); }, [search]); return ( lt;MovieContext.Provider value={{ setSearch, movies, favorites, favoriteHandler, showDetail, selectedMovie, }} gt; {children} lt;/MovieContext.Providergt; ); }; export default MovieApp;
Комментарии:
1. Вы отказались от проверки типа во многих местах с
any
помощью . Разве вы не можете написать некоторые типы?
Ответ №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] = useStatelt;Favorite[]gt;([]); const [movies, setMovies] = useStatelt;Movie[]gt;([]); const [selectedMovie, setSelectedMovie] = useStatelt;Movie | nullgt;(null); const [search, setSearch] = useStatelt;stringgt;("");
Ответ №2:
Вам нужно определить, какими типами данных должно быть ваше состояние, например:
const [movies, setMovies] = useStatelt;TheTypeThatIsReturngt;() // an example of using an array of objects: const [movies, setMovies] = useStatelt;Arraylt;{id: string, name: string}gt;gt;([])
Также вы должны установить значение по умолчанию для состояния фильмов, так как в настоящее время оно равно нулю, и именно поэтому вы получаете ошибку » любой[] не может быть назначен никогда []».
Вам будет намного проще отлаживать эти проблемы, если вы перестанете использовать «любой», так как это позволит всем типам проходить, а затем выдавать ошибки, что является целым смыслом машинописи. Вы можете определить это в верхней части файла с помощью интерфейса или даже в отдельной папке/файле для хранения ваших интерфейсов и моделей:
interface IMovieModel { id: string; name: string; } const [movies, setMovies] = useStatelt;Arraylt;IMovieModelgt;gt;([])
Если вы выполните эти действия, вы исправите ошибки, вам также нужно будет смоделировать ответ API или, по крайней мере, его части, которые вы хотите использовать, чтобы TS не жаловались на то, что идентификатор не найден.
Ответ №3:
React.createContext
необходимо передать значение по умолчанию, которое будет использоваться Consumer
s, не содержащимся в a Provider
.
И, как говорили все остальные, если вы не назначаете никаких полезных типов, зачем вообще использовать Typescript?
type Movie = { // ... } type MovieContextType = { setSearch(value: string): void movies: Movie[] // ... } const movieContext = createContextlt;MovieContextTypegt;({ /* ... */ }) const MovieApp: React.FC = ({children}) =gt; // ... // etc.