我想根据对象数组中存在的属性来设置react中的状态。
看起来类似的代码沙箱:https://codesandbox.io/s/sleepy-lamarr-0sbdz
这个提交函数在SelectComponent.tsx中以submitSelection()的形式出现,我让控制台记录了问题中的状态。它是一样的
我有一个状态对象,看起来像这样:
this state = {
columns : [
{Header: ƒ, accessor: "firstName",show: true},
{Header: ƒ, accessor: "status", show: true},
{Header: ƒ, accessor: "visits", show: true}
]
}
我有显示列名的复选框列表,并根据"show“标志隐藏/显示它们。我又创建了一个基于复选框选择的对象数组,如下所示:
this.state = {
selectedOptions: [
{name: "firstName", value: "firstName", show: true},
{name: "status", value: "status", show: false},
{name: "visits", value: "visits", show: true}
]
}
现在我需要根据"selectedOptions“的值来设置"columns”的状态。我必须遍历"selectedOptions“数组,然后基于每个对象的”值“(这里我使用它作为键),我需要在”列“中更新对象的相应”显示“属性。
在此示例中,列数组应类似于setstate:
columns : [
{Header: ƒ, accessor: "firstName",show: true},
{Header: ƒ, accessor: "status", show: false}, // because the value for this in selectedOptions is true
{Header: ƒ, accessor: "visits", show: true}
]
我使用了以下方法,但它不起作用
checkboxSubmit = () => {
let { selectedOptions , columns } = this.state;
const updatedObj = columns.map(object =>
value.some(columns => columns.value === object.accessor)
? { ...object, show: columns.show }
: { ...object }
);
this.setState(columns: updatedObj);
}
https://stackoverflow.com/questions/56761326
复制相似问题