Reactjs 显示特定项目详细信息页面时出现反应上下文API问题

我是一个新的反应，并试图理解上下文api。现在我有一个组件，它显示项目列表。我还有一个组件，显示关于该项目的详细信息。我试图做的是当我点击某个项目时，显示组件会显示该项目的信息。这是我目前的代码。我当前收到一个错误，状态未在我的Product.js文件中定义

PRODUCTS.JS
import React, { Component } from 'react';
import './App.css';
import { MyProvider, MyContext } from "./Context";
import { Link } from 'react-router-dom';

class Products extends Component {

  render() {
    const { id } = this.state.products
    return (
      <div className="products-list">
        <div className="showcase">
          <MyContext.Consumer>
            {(context) => (
              <React.Fragment>
                {context.state.products.map(item => {
                  return (
                    <Link to="/ProductOverview" style={{ textDecoration: 'none', color: 'inherit' }}>
                    <div onClick={() => context.productDetail(id)} className="showcase-card" style={{ backgroundImage: `url(${item.bgUrl})`}}>
                      <article key={item.id}>
                        <h6>{item.info}</h6>
                      </article>
                    </div>
                    </Link>
                      );
                  })}
              </React.Fragment>
            )}
          </MyContext.Consumer>
        </div>
      </div>
    )
  }
}

export default Products;


CONTEXT.JS
import React, {Component } from 'react';


export const MyContext = React.createContext();

export class MyProvider extends Component {
  state = {
    products: [
      {
        info: "Toy Car",
        id: '0001'
      },
      {
        info: "Toy Truck",
        id: '0002'
      },
      {
        info: "Toy Plane",
        id: '0003'
      },
      {
        info: "Toy Boat",
        id: '0004'
      }
    ]
  };

  getItem = id => {
    const products = this.state.products.find(item => item.id === id);
    return products;
  };

  productDetail = id => {
    const products = this.getItem();
    this.setState(() => {
      return { products };
    });
  };

  render() {
    return (
      <MyContext.Provider value={{
          state: this.state,
        productDetail: this.productDetail}}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}


PRODUCTOVERVIEW.JS

import React, { Component } from 'react';
import './App.css';
import { MyProvider, MyContext } from "./Context";


class ProductOverview extends Component {

  render() {
    return (
      <MyContext.Consumer>
        {(context) => {
          const {id, info} = context;
        return (
          <h1>{info}</h1>
        )
        }}
      </MyContext.Consumer>
    )
  }
};

export default ProductOverview;

PRODUCTS.JS
从“React”导入React，{Component}；
导入“/App.css”；
从“/Context”导入{MyProvider，MyContext}；
从'react router dom'导入{Link}；
类产品扩展组件{
render（）{
const{id}=this.state.products
返回(
{（上下文）=>(
{context.state.products.map（项=>{
返回(
context.productDetail（id）}className=“showcase card”style={{backgroundImage:`url（${item.bgUrl}）`}>
{item.info}
);
})}
)}
)
}
}
出口默认产品；
CONTEXT.JS
从“React”导入React，{Component}；
export const MyContext=React.createContext（）；
导出类MyProvider扩展组件{
状态={
产品：[
{
信息：“玩具车”，
id:'0001'
},
{
信息：“玩具卡车”，
id:'0002'
},
{
信息：“玩具飞机”，
id:'0003'
},
{
信息：“玩具船”，
id:'0004'
}
]
};
getItem=id=>{
const products=this.state.products.find（item=>item.id==id）；
退货产品；
};
productDetail=id=>{
const products=this.getItem（）；
此.setState（（）=>{
返回{产品}；
});
};
render（）{
返回(
{this.props.children}
)
}
}
PRODUCTOVERVIEW.JS
从“React”导入React，{Component}；
导入“/App.css”；
从“/Context”导入{MyProvider，MyContext}；
类ProductOverview扩展了组件{
render（）{
返回(
{（上下文）=>{
const{id，info}=context；
返回(
{info}
)
}}
)
}
};
导出默认产品概述；

您需要指定要定义和使用的状态。 在组件的开头，指定状态：

class Products extends Component {
state = {
   yourState:6
}
render() {

产品组件中没有状态。为了访问上下文存储中的数据，您必须在消费者内部使用箭头函数

所以，上下文api背后的想法是，将状态存储在上下文对象中，该对象带有两个组件。提供者和消费者

提供商：提供商将提供应用程序的所有信息。我们将在应用程序顶部设置提供商，如下所示：

index.js

import { MyProvider } from "./Context";
ReactDOM.render(
  <MyProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </MyProvider>,
  document.getElementById("root"));

值属性是一个对象。以下是您在组件中访问的方式：

<MyContext.Consumer>
        {(context) => {
        //context is the object that is returned by the Provider
        //inside state you have products array and you need to choose one of those elements inside the array. lets say you wanna select the first element which is the 0 index.

          const {id, info} = context.state.products[0];
        return (
          <h1>{info}</h1>
        )
        }}
      </MyContext.Consumer>

{（上下文）=>{
//上下文是提供程序返回的对象
//在状态内部，您有products数组，您需要在数组中选择其中一个元素。假设您要选择第一个元素，即0索引。
const{id，info}=context.state.products[0]；
返回(
{info}
)
}}

我不明白为什么我需要在开始时指定状态，是不是MyContext。消费者引入状态？此行

context.productDetail（id）}

返回了一个错误id未定义我编辑了注释。这应该是工作，但我觉得你想渲染的产品。你到底想做什么？I通常，当我在product.js中单击产品时，链接会将我带到ProductOverview.js。我希望ProductOverview显示我单击的产品的信息。因此，在产品页面中，您希望映射所有产品。因此，您需要创建产品或作为ProductDetails组件。如果你清楚地更新了你的问题，我将编辑答案

value={{
          state: this.state,
        productDetail: this.productDetail}}

<MyContext.Consumer>
        {(context) => {
        //context is the object that is returned by the Provider
        //inside state you have products array and you need to choose one of those elements inside the array. lets say you wanna select the first element which is the 0 index.

          const {id, info} = context.state.products[0];
        return (
          <h1>{info}</h1>
        )
        }}
      </MyContext.Consumer>