如何在javascript中更新數組的特定對象值

Question

我有一個對象數組，我在該數組上做了一個映射，現在我想更改特定的對象值。 我在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);
  };

Answer 1

就像評論中所說的那樣，您必須將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);
};

Answer 2

我可以看到的一個明顯問題是您沒有提供映射的組件鍵。

<>不能在 map 中使用，因為它不能傳遞一個鍵，所以這將是一個改進

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

Answer 3

而不是使用

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

用

localArray[index].value = 值