根据对象数组中存在的 a 属性设置状态：React+Typescript

Question

我想根据对象数组中存在的属性在反应中设置状态。

看起来相似的代码沙盒：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}
                         ]
             }

我有显示列名的复选框列表，并根据“显示”标志隐藏/显示它们。 我根据复选框选择创建了一个对象数组，看起来像：

this.state = { 
              selectedOptions: [
                                {name: "firstName", value: "firstName", show: true},
                                {name: "status", value: "status", show: false},
                                {name: "visits", value: "visits", show: true}
                                ]
            } 

现在我需要根据“selectedOptions”的值来设置“columns”的状态。我必须遍历“selectedOptions”数组，然后根据每个对象的“value”（这里我用它作为键），我需要更新“columns”中对象的相应“show”属性。

在这个例子中，columns 数组应该像 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);
}

Answer 1

我会从 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)
}

如果您需要地图进行其他计算，您可以将其添加到状态中。

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)
  };

Answer 2

这是我的solution。

我没有在 SelectComponent 中使用 CheckBox 数据结构数组，而是使用了映射的布尔数组（仅用于显示值）——这只是我的偏好。

我认为您之前的问题是因为您将相同的 Array 实例传递给 submitSelection。 React 不明白 App 应该更新，因为只是改变了 Array 里面的对象，而不是实际的 Array。

您可以通过在提交之前重新创建数组来使其工作，但在这种情况下，您将改变 SelectComponent 中 App.columns 的值。如您所知，道具不应该被修改，所以这很糟糕。

Answer 3

我认为您在映射时可能混淆了变量。试试这个。

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;
  });
});