ReactJS:用于对象数组的useState

Question

我有一个onChange表单，在onChange函数中我需要保存值。

const [choosenVar, setChoosenVar] = useState([
{
posto1: { name: '', value: '' },
},
{
posto2: { name: '', value: '' },
},
{
posto3: { name: '', value: '' },
},
{
posto4: { name: '', value: '' },
},
{
posto5: { name: '', value: '' },
},
{
posto6: { name: '', value: '' },
},
]);

const onChange = event => {
const { name, value, id } = event.target;
// setchoosenVar({ ...choosenVar, [`posto${id}.nome`]: value });
const newArr = [...choosenVar];
};

现在我的问题是每个"id"在事件。目标我应该保存名称和值在post "id"，我该怎么做??

的例子:

const onChange = event => {
const { name, value, id } = event.target;
// name: "Application", value: "appSett", id: "1"
// in this case I should take: choosenVar.posto1 and set choosenVar.posto1.name = name, choosenVar.posto1.value= value.
};

Answer 1

总是首先使用...(扩展操作符)复制数组状态变量。

findIndex()，并在找到的索引处更新对象。使用Object.keys()，我们将获得对象的所有键，因为我们只关心我们检查它的第一个键。

你可能需要再次传播来复制对象，这样你就不会以某种方式改变状态

const onChange = event => {
const { name, value, id } = event.target;
const newArr = [...choosenVar];
let foundIndex = newArr.findIndex(x => { return Object.keys(x)[0] === 
`posto${id}` });
let copyObject = {...(newArr[foundIndex][`posto${id}`]) };
newArr[foundIndex] = { [`posto${id}`] : copyObject };
setChoosenVar(newArr );
};

注意:以上假设不存在空对象。并且您要查找的Id已经存在。

想补充一点，它们可能是一种更好的存储状态的方式。包含以下元素的数组可能更容易处理

{
posto: { id : 1, name: '', value: '' },
}

Answer 2

您可以这样做:

const { name, value, id } = event.target;
setChoosenVar({
...choosenVar,
...{`posto${id}`:value}
})