TypeScript 接口：類型“B”上不存在屬性“A”| 空值'

Question

我正在嘗試將 TypeScript 接口類型添加到我提取的 JSON 數據中。我目前收到與我的 MachineDetail.tsx 文件相關的以下錯誤：

Property 'data' does not exist on type 'APIContextInterface | null'.

MachineDetail.tsx （下面的行是拋出錯誤的地方）

const { data, isLoading } = useContext(APIContext);

apiContext.tsx （我在其中提取 API 數據並將其存儲在 Context 中）

我的 TypeScript 接口和我保存數據的上下文：

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

interface APIContextInterface {
  category: string;
  product_details: {
    id: number;
    category: string;
    model: string;
    power: number;
    operating_weight: number;
    description: string;
    image: string;
  };
}

export const APIContext = createContext<APIContextInterface | null>(null);
   
export default function APIContextProvider({ children }) {
  // Initialize state
  const [data, setData] = useState([]);
  const [isLoading, setLoading] = useState(true);

  // Fetch data
  useEffect(() => {
    let url = "../db.json";
    axios
      .get(url)
      .then(function (response) {
        setData(response.data.machines);
        setLoading(false);
      })
      .catch((error) => console.log(error));
  }, []);

  return (
    <APIContext.Provider value={{ data, isLoading }}>
      {children}
    </APIContext.Provider>
  );
}

JSON 數據的結構如下：

{
    "machines": [{
            "category": "category name",
            "product_details": [{
                    "id": 1,
                    "category": "category name",
                    "model": "224X3",
                    "power": 67.1,
                    "operating_weight": 5849,
                    "description": "desc goes here",
                    "image": "url-link"
                },
             ],
          },
     ]
}

Answer 1

這是因為您將APIContext定義為包含APIContextInterface | null的上下文APIContextInterface | null APIContextInterface | null ：

export const APIContext = createContext<APIContextInterface | null>(null);

而您實際上提供了另一種類型的值。 請記住，您提供給createContext的類型始終是您應該提供的類型。 因此你應該寫

export const APIContext = createContext<{
  data: APIContextInterface[],
  isLoading: boolean
} | null>(null);

而是為了匹配您的實際數據。

Answer 2

引發此錯誤是因為在創建上下文后，您的 useState 可以創建單獨的狀態，而不是將其添加到您創建的上下文中。

您可以從這個答案中找到解決方案： 在 Typescript 中使用 useContext 傳遞狀態