[英]How to update specific object value of an array in javascript
我有一个对象数组,我在该数组上做了一个映射,现在我想更改特定的对象值。 我在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
道具传递给您正在渲染的内容,以便 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);
};
我可以看到的一个明显问题是您没有提供映射的组件键。
<>
不能在 map 中使用,因为它不能传递一个键,所以这将是一个改进
<React.Fragment key={item.id}>
而不是使用
localArray.splice(index, 1, { ...item, value: value });
用
localArray[index].value = 值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.