如何在通过对象数组进行映射时更新对象的值？
如何在通过对象数组进行映射时更新对象的值？
提问于 2020-06-11 23:18:19
我正在通过数组进行映射，并使用输入的值来显示对象文本，如下所示：
{items.map((item) => {
return (
<div key={item.text}>
<input value={item.text} type="text" />
</div>
);
})}现在，当用户单击输入时，我希望更改特定的对象文本，因此我为输入创建了一个onChange函数：
<input onChange={(e) => set(e.target.value)} value={item.text} type="text" />然后在set函数中获得值，并希望将对象的文本更改为用户输入的新值：
const set = (value) => {
items.map((item) => {
if (item.text === value) {
item.text === value;
}
return null;
});
console.log(value);
};但它指出了一个错误：
Expected an assignment or function call and instead saw an expression no-unused-expressions另外，我想它不会更新对象的值。
那么，在对整个数组进行映射时，如何正确地更新输入字段中的对象文本呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-11 23:25:09
在set方法中，使用的是比较而不是赋值。
item.text === value;这将更新项目对象。
item.text = value;Stack Overflow用户
发布于 2020-06-12 02:10:06
React中的表单输入被称为受控元件，在文档中有一些很好的示例，它们应该有助于阐明类似于此的问题。还有大量的表单库在管理表单状态时带来了很多痛苦。
这里的另一个重要细节是array.map返回一个新数组，而不是修改一个适当的数组。因此，您的set函数将需要使用您想要的更新来创建一个新的数组，理想情况下，您将使用React内置的工具(例如useState或setState)更新您的items列表。这是我能想出的一个最小的例子来说明这一点。在这里，我假设您的items数组在某个地方处于反应状态，并且您的items数组是一个简单的对象数组，可能只有一个id和text字段。
import React, { useState } from "react";
function App() {
const [items, setItems] = useState([
{ id: 1, name: "first", text: "first" },
{ id: 2, name: "second", text: "second" },
{ id: 3, name: "third", text: "third" }
]);
const handleChange = (evt, id) => {
const { name, value } = evt.target;
const newItems = items.map(item => {
if (item.id !== id) {
return { ...item };
}
return { id, name, text: value };
});
setItems(newItems);
};
const submit = () => {
alert(JSON.stringify(items));
};
return (
<div className="App">
<h1>Example</h1>
<form>
{items.map(item => (
<div key={item.id}>
<input
name={item.name}
value={item.text}
onChange={evt => handleChange(evt, item.id)}
/>
</div>
))}
<button onClick={submit}>Submit</button>
</form>
</div>
);
}
export { App as default };页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62335092
复制相关文章
相似问题
腾讯云开发者
