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

Question

我想根据对象数组中存在的属性在 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}
                         ]
             }

我有显示列名称的复选框列表，并根据“显示”标志隐藏/显示它们。我根据复选框选择创建了又一个对象数组，如下所示:

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

Answer 1

这是我的 solution .

我没有在 SelectComponent 中使用 CheckBox 数据结构数组，而是使用了 bool 值映射数组(仅用于显示值) - 这只是我的偏好。

我认为您之前的问题是因为您将相同的数组实例传递给submitSelection。 React 不知道 App 应该更新，因为只有 Array 内部的对象发生了变化，而不是实际的 Array。

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