我有当前保存数据的contextapi设置。我有一个“/details/id”页面，我想为每个产品加载特定于产品的数据。我已经设置了这个“/details/id”页面，以便使用react router进入我的“machinedeail.js”组件，我只需要将contextapi中保存的数据放入machinedeail.js组件。
在下面的machinedeail.js下，您将看到我正在测试图像中的加载，看看它是否有效。目前还没有加载。
这里是codesandbox中的完整代码。
apicontext.js（我在这里创建了上下文存储）

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

const APIContext = createContext();

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>
  );
}

// Create a hook to use the APIContext, this is a Kent C. Dodds pattern
export function useAPI() {
  const context = useContext(APIContext);
  if (context === undefined) {
    throw new Error("Context must be used within a Provider");
  }
  return context;
}

machinedeail.js（我试图将数据加载到其中）

import React from "react";
import { useAPI } from "../context/apiContext";
import Header from "../components/Header";

export default function MachineDetail() {
  // Load in global state
  const { data, isLoading } = useAPI();
  return (
    <>
      <Header title="Product title" subTitle="Product category" />
      {!isLoading ? (
        <div className="container">
          <div className="row">
            <div className="col-lg-6">
              <img src={data.model.image} alt="" /> <-- trying to load in data here
            </div>
          </div>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </>
  );
}