如何在javascript中更新数组的特定对象值答案

【问题标题】：How to update specific object value of an array in javascript如何在javascript中更新数组的特定对象值
【发布时间】：2021-12-03 22:29:42
【问题描述】：

我有一个对象数组，我在该数组上做了一个映射，现在我想更改特定的对象值。我在map() 函数中使用了onChange 方法。它无法正常工作，请有人帮我解决这个问题。

谢谢

localPreRoutingCall &&
    localPreRoutingCall.map((item, index) => (
      <>
        <div className="pre-route-title">{item && item.field_title}</div>
        <textarea
          placeholder="Enter something"
          className="pre-route-textarea"
          value={item && item.value}
          onChange={(e) => {
            e.persist();
            changeObjectValue(e.target.value, item);
          }}
        />
        <div className="pre-route-description">
          {item && item.description}
        </div>
      </>
    ))

我正在更新对象值的函数

 const changeObjectValue = (value, item) => {
    console.log("@@ array", value);
    let localArray = localPreRoutingCall;
    var index = _.findIndex(localArray, { id: item.id });
    localArray.splice(index, 1, { ...item, value: value });
    setLocalPreRoutingCall(localArray);
  };

【问题讨论】：

能否尝试提供key 属性来映射内容容器？
我试过了，但很抱歉我没能实现我的目标。当我在 textarea 中输入内容时，它只会更新一个字符，因为我输入 Jonas 它只是更新了 S 而不是全名
所以你也应该尝试做{...item, value: oldValue + value}
实际上，当我输入名称为 Jonas 时，它会重新渲染组件 5 次，每次渲染时只返回单个字符

标签： javascript reactjs ecmascript-6 lodash

【解决方案1】：

我可以看到一个明显的问题是你没有给映射的组件键。

<>不能在map中使用，因为它不能传递key，所以这将是一个改进

<React.Fragment key={item.id}>

【讨论】：

我试过了，但很抱歉我没能实现我的目标。当我在 textarea 中输入内容时，它只会更新一个字符，因为我输入 Jonas 它只是更新了 S，而不是全名

【解决方案2】：

而不是使用

localArray.splice(index, 1, { ...item, value: value });

使用

localArray[index].value = value

【讨论】：

实际上，它只是更新输入文本的最后一个字符。我要存储全文
找到你从“e.target.value”得到的东西。如果它只是最后一个字符，那么你需要将它与前一个值连接起来
我需要一些代码方面的帮助，请您分享一些代码如何实现它

【解决方案3】：

就像在 cmets 中所说的那样，您必须将 key 属性传递给您正在渲染的内容，以便 React 知道发生了什么变化。

当您立即传递值时，我认为您没有理由使用 e.persist 函数。

import { Fragment } from "react";

localPreRoutingCall?.map((item, i) => (
  <Fragment key={item.id}>
    <div className="pre-route-title">{item.field_title}</div>
    <textarea
      placeholder="Enter something"
      className="pre-route-textarea"
      value={item.value}
      onChange={(e) => changeObjectValue(e.target.value, i)}
    />
    <div className="pre-route-description">
      {item.description}
    </div>
  </Fragment>
))

您也没有在更改其值之前克隆 localPreRoutingCall 状态数组。

React 不知道发生了什么变化的另一个原因。

const changeObjectValue = (value, i) => {
  const localArray = [...localPreRoutingCall];
  localArray[i].value = value;
  setLocalPreRoutingCall(localArray);
};

【讨论】：