'CardsContextProps | 类型不存在属性'cardsList'无效的'答案

【问题标题】：Property 'cardsList' does not exist on type 'CardsContextProps | null''CardsContextProps | 类型不存在属性'cardsList'无效的'
【发布时间】：2022-07-14 06:01:07
【问题描述】：

当我尝试使用上下文时出现此错误：

类型“CardsContextProps”上不存在属性“cardsList”|空'。

我不知道为什么=[

在我的标题上：

import React, { useContext } from "react";
import { Grid, Box } from "@mui/material";
import { useStyles, CustomTextField } from "./style";
import PkmLogo from "images/pkm-tcg.png";
import { CardsContext } from "services/context/CardsList";

export default function Header() {
  const { cardsList } = useContext(CardsContext);

  const classes = useStyles();
  return (
    <Grid className={classes.header}>
      <Box
        sx={{
          width: 200,
        }}
      >
        <img src={PkmLogo} width="100%" alt="logo" />
      </Box>
      <CustomTextField
        label="Search a Card"
        id="outlined-start-adornment"
        sx={{ m: 1, width: "100%" }}
      />
    </Grid>
  );
}

【问题讨论】：

标签： reactjs typescript react-context

【解决方案1】：

这是我的上下文：

import React, { createContext, useEffect, useState } from "react";
import api from "../api/api";

interface CardsContextProps {
  cardsList: any;
  search: string;
  setSearch: (value: string) => void;
}

export const CardsContext = createContext<CardsContextProps | null>(null);

const CardsProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [cardsList, setCardsList] = useState<any[]>([]);
  const [search, setSearch] = useState("" as string);

  useEffect(() => {
    const getCards = async () => {
      try {
        const response = await api.get("cards");
        setCardsList(response.data);
      } catch {
        console.log("deuruim");
      }
    };
    getCards();
  }, []);

  const values = {
    cardsList,
    search,
    setSearch,
  };

  return (
    <CardsContext.Provider value={values}>{children}</CardsContext.Provider>
  );
};

export default CardsProvider;

有人知道解决办法吗？

【讨论】：