使用 useContext 从数组中查找更新对象答案

【问题标题】：Find an update object from an array in react using useContext使用 useContext 从数组中查找更新对象
【发布时间】：2020-12-17 01:34:49
【问题描述】：

这是一个棘手的问题，我一直很难弄清楚这一点。首先，我使用 useContext 来创建一个全局状态。全局状态将保存并提供一个带有对象的数组。我有一个与每个对象一起呈现的表单。表单将有一个带有值的输入。我的目标是能够找到对象并更新值。例如，Item1 中的输入会将“20”更新为正在输入的任何新数字，与 Item2 相同现在发生了什么，每次我提交输入时，都会创建一个全新的数组，而不是在更新时创建。我知道这是一种更简单的方法来实现这一点，但我需要这个数组处于全局状态。

这是我的沙盒的链接 https://codesandbox.io/s/muddy-wildflower-h5hhw?file=/src/App.js

谢谢！

【问题讨论】：

您的问题令人困惑，请提供代码，而不是某个沙盒的链接。

标签： javascript arrays reactjs object use-context

【解决方案1】：

您需要指定要更新的Array Item。首先，您需要指定需要更新的项目。为此，我通过card props 传递了value id

<Card
  name={value.name}
  value={value.Itemvalue}
  key={value.id}
  id={value.id}
/>

我已经使用map 来更新特定的object

const updatedData = value.map((obj) => {
    if (obj.id === id) {
        return { ...obj, Itemvalue: itemValue };
    } else return obj;
});
updateValue(updatedData);

这是工作的Link

【讨论】：

谢谢先生。花了整整一夜才弄清楚这一点，而你让它看起来如此简单。
@jan 很高兴知道，这很有帮助。请将此答案标记为已接受的答案。这也会对其他人有所帮助。

【解决方案2】：

问题是您要添加一个新元素，所有表单都会更新。这与您需要的不同。将id 传递给更新函数，以便您可以更新该特定项目。

您的代码

  const addValue = (event) => {
    event.preventDefault();
    // You're not updating existing element, instead adding a new value.
    updateValue((prevItems) => [...prevItems, { Itemvalue: itemValue }]);
  };

// ...

    <form onSubmit={addValue}>
      <input
        type="text"
        name="price"
        Value={itemValue} // --> Typo here
        onChange={updateItemValue}
      />
      <button>Submit</button>
    </form>

您应该将id 作为道具传递，而不是从上下文中获取它。所以<Add /> 知道在哪里更新值。

更正的代码

import React, { useContext, useState } from "react";
import { ValueContext } from "./ValueContext";

const Add = ({ id }) => { // --> Passing id from <Card /> 
  const [itemValue, setItemValue] = useState("");
  const [value, updateValue] = useContext(ValueContext);

  const updateItemValue = (event) => {
    setItemValue(event.target.value);
  };

  const addValue = (event) => {
    event.preventDefault();
    updateValue((prevItems) => {
      const index = prevItems.findIndex(x => x.id === id);
      const updatedItem = {
        ...prevItems[index],
        Itemvalue: itemValue
      }

      return [
        ...prevItems.slice(0, index),
        updatedItem, // --> Updating the item, instead of creating new one
        ...prevItems.slice(index + 1)
      ]
    });
  };
  return (
    <form onSubmit={addValue}>
      <input
        type="text"
        name="price"
        Value={itemValue}
        onChange={updateItemValue}
      />
      <button>Submit</button>
    </form>
  );
};

export default Add;

【讨论】：

非常感谢。您的代码也能正常工作！