时间戳

首页 > 解决方案 > 显示特定项目详细信息页面的反应上下文 API 问题

reactjs - 显示特定项目详细信息页面的反应上下文 API 问题

问题描述

我是 React 新手，正在尝试了解 Context 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;

标签： reactjsreact-context

解决方案

const { id } = this.state.products

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

因此，上下文 api 背后的想法是，您将状态存储在上下文对象中，并且该对象带有 2 个组件。供应商和消费者。

提供者：提供者将提供应用程序的所有信息。我们将在我们的应用程序之上设置提供程序，如下所示：

index.js

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

消费者：将使用提供商提供的信息。我们可以在应用程序中的任何位置获取信息。

所以这就是您从提供者返回的内容。

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

value prop 是一个对象。这是您应该在组件中访问的方式：

<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>

推荐阅读