在React with TypeScript中使用axios时，是什么原因导致上下文类型错误以及如何修复它？

cgvd09ve 于 2023-06-07 发布在 TypeScript

关注(0)|答案(1)|浏览(266)

我想用 typescript 写上下文。这里的API是通过axios绘制的，然后用卡片写在屏幕上。但是它给出了一个关于上下文类型的错误，我如何消除它？
我的错误是：键入“{ data：产品列表|undefined; setData：React.Dispatch<React.SetStateAction<ProductList| undefined>>“}”不能分配给类型“productType[]”。对象文本只能指定已知属性，并且类型“productType[]”中不存在“data”。

import axios from "axios";
import { createContext, useEffect, useState } from "react";
interface ContextChildrenProps {
    children: JSX.Element
}

export interface SingleProduct {
    title: string,
    description: string,
    thumbnail: string
}

export interface productType {
    product: SingleProduct
}

export interface ProductList {
    data: productType[]
}

export const GlobalProductsContext = createContext<productType[] | null>({} as productType[])

export const ProductsContextProvider = ({ children }: ContextChildrenProps) => {

    const [data, setData] = useState<ProductList>()

    useEffect(() => {
        axios.get('https://fakestoreapi.com/products')
            .then(res => {
                console.log(res)
                setData(res.data)
            })

    }, [])

    return (
        <GlobalProductsContext.Provider value={{ data, setData }}>
            {children}
        </GlobalProductsContext.Provider>
    )
}

import React from 'react'
import { productType } from '../context/GlobalData'

const SingleCard = ({ product }: productType) => {
    return (
        <>
            <div className="col-lg-4 p-2" data-aos="flip-left">
                <div className="card" style={{ width: '100%', height: '100%' }}>
                    <img src={product.thumbnail} className="card-img-top" alt="..." />
                    <div className="card-body">
                        <h5 className="card-title">{product.title}</h5>
                        <p className="card-text">{product.description}</p>
                        <a href="#" className="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </>
    )
}

export default SingleCard

typescript

来源：https://stackoverflow.com/questions/76404651/what-causes-a-context-type-error-when-using-axios-in-react-with-typescript-and-h

1条答案

按热度按时间

zsohkypk1#

上下文值的TS类型不正确。
尝试：

import axios from "axios";
import React, { createContext, useEffect, useState } from "react";

interface ContextChildrenProps {
  children: JSX.Element
}

export interface SingleProduct {
  title: string,
  description: string,
  thumbnail: string
}

type ProductContext = {
  data: SingleProduct[];
  setData: React.Dispatch<React.SetStateAction<SingleProduct[]>>
}

export const GlobalProductsContext = createContext<ProductContext>({ data: [], setData: () => { } })

export const ProductsContextProvider = ({ children }: ContextChildrenProps) => {
  const [data, setData] = useState<SingleProduct[]>([])

  useEffect(() => {
    axios.get('https://fakestoreapi.com/products')
      .then(res => {
        console.log(res)
        setData(res.data)
      })

  }, [])

  return (
    <GlobalProductsContext.Provider value={{ data, setData }}>
      {children}
    </GlobalProductsContext.Provider>
  )
}

赞(0）回复(0）举报 2023-06-07

我来回答

在React with TypeScript中使用axios时，是什么原因导致上下文类型错误以及如何修复它？

1条答案

相关问题

热门标签

最新问答