如何使用 React Context API 更改来自单击项目的信息的状态答案

【问题标题】：How to alter state with information from clicked item using React Context API如何使用 React Context API 更改来自单击项目的信息的状态
【发布时间】：2019-10-01 05:02:06
【问题描述】：

需要导航并显示已点击项目的产品详细信息。我的控制台日志中返回了正确的项目，但不确定如何编辑/设置状态并将虚拟文本替换为单击项目的值。我正在使用内容 API 进行状态管理，数据来自导入到我的 Context.js 中的单独文件。

上下文.js

import React, { useState, createContext } from 'react';
import { storeProducts, detailProduct } from './data';

export const ProductContext = createContext();

export const ProductProvider = (props) => {

    const [ products ] = useState(storeProducts);
    const [ dummyDetails ] = useState(detailProduct);

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

    const showDetails = (id) => {
        const product = getItem(id);
        console.log(product);
        console.log(dummyDetails);
    };

    const addToCart = (id) => {
    console.log(id);
    };


    return (
        <ProductContext.Provider value={[ products, dummyDetails, showDetails, addToCart ]}>
        { props.children }
        </ProductContext.Provider>
    );
}

我从 getItem 函数返回了我的信息，并且 showDetails 中的 2 个 console.logs 为我提供了 dummyDetails 和产品详细信息。我需要将产品换成 dummyDetails。提前致谢。

【问题讨论】：

标签： reactjs react-context react-state-management

【解决方案1】：

您可以通过useState的函数返回来设置产品

const [ dummyDetails, setProduct ] = useState(detailProduct);

const showDetails = (id) => {
   const product = getItem(id);
   setProduct(product);
};

【讨论】：