[英]Map function increment on global react context state
在使用 React 的上下文 API 時,我需要一些幫助來增加一個值。 這是一個更好理解的示例:假設我有物品:
const [items, setItems] = useContext(ItemsContext)
這些項目是數組中的 JSON 對象。 然后我想在列表中返回每個項目的屬性,但其中一些已修改 - 例如,該項目有數量,我想在點擊時增加/減少它。 我如何為每個項目單獨實現這一目標?
我嘗試為數量制作本地 state:
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>
Here is working example and I will explain it a little: in App
we make MyContext and state with hook, then we provide state and function to update state to Context provider as value
. 然后在 Provider 內部的任何地方,我們都可以訪問 state 和 setter。 我們渲染項目,我們可以使用來自 Context 的鈎子設置器更新它們。
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;
喜歡它,如果它正在工作)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.