映射函数增量在全局反应上下文状态

Question

我需要一些帮助，通过地图函数增加一个值，同时使用React的上下文API。下面是一个更好理解的例子:假设我有items:

const [items, setItems] = useContext(ItemsContext)

这些项是数组内的JSON对象。然后我想在列表中返回每个项目的属性，但其中一些是修改过的-例如，项目有数量，我想在点击时增加/减少它。我如何为每个项目单独实现这一点?

我尝试为数量创建一个本地状态:

const [quantity, setQuantity] = useState([])

，所以我有所有元素的所有数量，但它没有得到任何东西

我想要完成的事情类似于:

<div>
<ul>
{
items.map(item => (
<li>
<p>item.name</p>
<p>item.quantity</p>
<button onClick={incQuantity}>  </button>
</li>
}
</ul>
</div>

编辑:

const [idCounter, setIdCounter] = useState(0)

我使用道具。这里，因为这是另一个组件。

const addItem = () => {
if (quantity > 0) {
setIdCounter(idCounter + 1)
setItems(prevItems => [...prevItems, {id: idCounter, name: props.name, price: props.price, quantity: quantity }])
}
}

我实现了完全相同的处理程序:

const quantityHandler = (id, diff) => {
setItems(items.map((item) => 
item.id === id ? {...item, quantity: item.quantity + diff} : item
))
}

下面是列表本身:

<div>
<ul>
{
items.map(item => (
<li>
<p>item.name</p>
<p>item.quantity</p>
<button onClick={() => quantityHandler(item.id, 1)}>  </button>
<button onClick={() => quantityHandler(item.id, -1)}>  </button>
</li>
}
</ul>
</div>

Answer 1

这是一个工作的例子，我将解释一下:在App中，我们用钩子创建MyContext和state，然后我们提供状态和函数来更新状态作为value的上下文提供者。然后在Provider内部的任何地方我们都可以访问那个状态和setter。我们渲染项目，并可以使用Context中的钩子setter来更新它们。

import React, { useState, useContext } from "react";
const MyContext = React.createContext(null);
const initialState = [
{ id: 1, quantity: 1 },
{ id: 2, quantity: 2 },
{ id: 3, quantity: 3 },
{ id: 4, quantity: 4 },
];
const DeepNestedComponent = () => {
const [stateFromContext, setStateFromContext] = useContext(MyContext);
// MyContext should be imported
const buttonHandler = (id, diff) => {
setStateFromContext(
stateFromContext.map((item) =>
item.id === id ? { ...item, quantity: item.quantity + diff } : item
)
);
};
return (
<div>
{stateFromContext.map(({ id, quantity }) => (
<div key={id}>
{quantity}
<button onClick={() => buttonHandler(id, 1)}> + </button>
<button onClick={() => buttonHandler(id, -1)}> - </button>
</div>
))}
</div>
);
};
const App = () => {
const [contextState, setContextState] = useState(initialState);
return (
<MyContext.Provider value={[contextState, setContextState]}>
<DeepNestedComponent />
</MyContext.Provider>
);
};
export default App;

Like it if it is working)