根据对象数组中存在的属性设置状态：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}
                         ]
             }

我有显示列名称的复选框列表，并且基于 "show" 标志我 hide/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" 数组，然后根据每个对象的 "value"（这里我使用它作为键），我需要更新相应的 "show" 属性 "columns".

中的对象

在此示例中，列数组在设置状态后应如下所示：


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

如果您需要其他计算的地图，您可以将其添加到州。

预计到达时间：根据您的代码沙箱，这是该函数的代码

  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

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

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

Answer 3

这是我的 solution。

我没有在 SelectComponent 中使用 CheckBox data-structure 数组，而是使用映射的布尔数组（仅用于显示值）- 这只是我的偏好。

我认为您之前的问题是因为您将同一个 Array 实例传递给 submitSelection。 React 不理解应该更新 App，因为只有 Array 内部的对象被更改，而不是实际的 Array。

您可能只需在提交前重新创建数组即可使其正常工作，但在这种情况下，您需要改变 SelectComponent 中 App.columns 的值。如您所知，道具不应该被修改，所以这很糟糕。

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

Set state based on an a property present in array of objects : React+Typescript

javascript

setstate

typescript

ecmascript-6

reactjs

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

Set state based on an a property present in array of objects : React+Typescript

javascript

setstate

typescript

ecmascript-6

reactjs

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