需要导航并显示已单击项目的产品详细信息。我在控制台日志中返回了正确的项目，但不确定如何编辑/设置状态并用单击项目的值替换虚拟文本。我使用内容 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。提前致谢。
您可以通过功能返回设置产品 useState
const [ dummyDetails, setProduct ] = useState(detailProduct);
const showDetails = (id) => {
const product = getItem(id);
setProduct(product);
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句