根据对象数组中存在的a属性设置状态: React+Typescript
我想根据对象数组中存在的属性来设置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);
}回答 3
Stack Overflow用户
发布于 2019-06-26 16:05:11
这是我的solution。
我没有在SelectComponent中使用CheckBox数据结构数组，而是使用了布尔值的映射数组(仅用于显示值)-这只是我的偏好。
我认为您之前的问题是因为您将相同的数组实例传递给了submitSelection。React不理解App应该被更新，因为只有Array中的对象被更改，而不是实际的Array。
您可能只需在提交前重新创建数组即可使其正常工作，但在本例中，您将在SelectComponent中更改App.columns的值。正如你所知道的，道具不应该被修改，所以这是不好的。
Stack Overflow用户
发布于 2019-06-26 04:25:12
我会用selectedOptions let selectedOptionsMap = new Map(selectedOptions.map(option => [option.value, option]))做一张地图
然后将您的函数更新为：
checkboxSubmit = () => {
let { selectedOptions , columns } = this.state;
let selectedOptionsMap = new Map(selectedOptions.map(option => [option.value, option]))
const updatedColumns = columns.map(column => (
{...column, show: selectedOptionsMap.get(column.accessor) ? selectedOptionsMap.get(column.accessor).show : column.show}
))
this.setState(columns: updatedColumns)
}如果您需要用于其他calc的map，您可以将其添加到状态。
ETA:基于您的代码沙箱，下面是该函数的代码
submitSelection = () => {
let showMap = new Map(this.state.optionsArr.map(option => [option.value, option.show]))
let updatedColumns = this.props.data.map(column => (
{...column, show: showMap.get(column.accessor) != null ? showMap.get(column.accessor) : column.show }
))
this.props.handleSetState(updatedColumns)
};Stack Overflow用户
发布于 2019-06-26 04:28:52
我想你可能在映射的时候混淆了你的变量。尝尝这个。
checkboxSubmit = () => {
this.setState(({columns, selectedOptions}) => {
const result = columns.map(col => {
const op = selectedOptions.find(op => col.accessor === op.value);
return { ...col, show: op.show }
});
return result;
});
});https://stackoverflow.com/questions/56761326
复制相似问题