代码之家 › 专栏 › 技术社区 › Stlick

如何在React中解决这个类型脚本问题

typescript reactjs

Stlick · 技术社区 · 3 年前

我正在尝试实现从我使用的API返回的数据类型。这个 total_page 和 total_results 被标记为错误。看来我需要实现某种类型的。我不明白如何解决这类问题。信息是:

(属性)反应。ProviderProps。值:MoviesContextData 类型“{movies:MovieData[];pageNumber:number;setPageNumber:Dispatch<SetStateAction>}”没有“MoviesContextData”类型的以下属性:总页数、总结果(2739) 指数d、 ts(327,9):预期的类型来自'value'属性,该属性在这里的类型'intrinsitactattributes&ProviderProps'

import {
    useContext,
    createContext,
    useEffect,
    useState
} from "react"

import { MoviesProviderProps } from "../interfaces/props"
import { MovieData, MoviesContextData } from "../interfaces/types"

import axios from "axios"
import { POPULAR_BASE_URL } from "../services/api"

const MoviesContext = createContext<MoviesContextData>(
    {} as MoviesContextData
)

export const MoviesProvider = ({ children }: MoviesProviderProps) => {
    const [movies, setMovies] = useState<MovieData[]>([])
    const [pageNumber, setPageNumber] = useState(1)
    const [totalResults, setTotalResults] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)

    const nextPage = ({ pageNumber }: MoviesContextData) => {
       axios.get(`${POPULAR_BASE_URL}&page=${pageNumber}`)
    }

    useEffect(() => {
        axios.get(`${POPULAR_BASE_URL}&page=${pageNumber}`)
            .then(response => {
                setMovies(response.data.results)
            })
    }, [])

    return (
        <MoviesContext.Provider value={{ movies, pageNumber, setPageNumber }}>
            {children}
        </MoviesContext.Provider>
    )

}

export const useMovies = () => {
    const context = useContext(MoviesContext)

    return context
}

类型:

  export type MoviesContextData = {
    movies: MovieData[];
    pageNumber: number;
    setPageNumber: (prevState: number) => void;
    total_pages: number;
    total_results: number;
}

export type MovieData = {
    id: number;
    backdrop_path: string;
    poster_path: string;
    title: string;
    release_date: string;
    vote_average: number;
}

1 回复 | 直到 3 年前

Alex Wayne 3 年前

你定义 MoviesContextData 作为:

export type MoviesContextData = {
    movies: MovieData[];
    pageNumber: number;
    setPageNumber: (prevState: number) => void;
    total_pages: number;
    total_results: number;
}

然后为该类型提供以下值:

<MoviesContext.Provider value={{ movies, pageNumber, setPageNumber }}>

total_pages 和 total_results 是必需的属性,但上下文提供程序的值中缺少这些属性。

这就是错误消息的这一部分试图告诉您的:

没有“MoviesContextData”类型的以下属性:总页数、总结果(2739)

要修复它,您需要为这些属性提供以下内容:

<MoviesContext.Provider value={{
  movies,
  pageNumber,
  setPageNumber,
  total_pages: Math.ceil(totalResults / numberOfResultsPerPage),
  total_results: totalResults
}}>

或者将属性设置为可选:

export type MoviesContextData = {
    // other properties...
    total_pages?: number;
    total_results?: number;
}