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

Question

我需要一些帮助来在使用 React 的上下文时通过 map 函数递增一个值 API。下面是一个例子，以便更好地理解：假设我有物品：

const [items, setItems] = useContext(ItemsContext)

这些项目是数组中的 JSON 个对象。然后我想 return 列表中每个项目的属性，但其中一些属性已修改 - 例如，该项目有数量，我想 increment/decrement 单击它。如何为每个项目单独实现此目的？

我尝试为数量创建本地状态：

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 和状态，然后我们提供状态和函数以将状态更新到上下文提供程序，如 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;

喜欢它，如果它有效）

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

Map function increment on global react context state

javascript

reactjs

react-context