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

我有显示列表名称的复选框列表，并基于显示"标志隐藏/显示它们.我根据复选框的选择又创建了一组对象数组:

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

现在，我需要基于"selectedOptions"的值设置列"的状态.我必须遍历"selectedOptions"数组，然后基于每个对象的值"(此处将其用作键)，我需要在列"中更新对象的相应显示"属性./p>

在此示例中，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);
}

解决方案

这是我的解决方案.

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

我认为您以前的问题是因为您将同一Array实例传递给了SubmitSelection. React不了解应该更新App，因为只有Array内部的对象已更改，而不是实际的Array.

您可以通过在提交之前重新创建Array来使其工作，但是在这种情况下，您将对SelectComponent中App.columns的值进行突变.如您所知，不应该修改道具，所以这很不好.

I want to set state in react based on property that is present in the array of objects.

Code Sandbox that looks similar : https://codesandbox.io/s/sleepy-lamarr-0sbdz

This submit function is present as submitSelection() inside SelectComponent.tsx where I have console logged the state in the question . It is identical

I have a state object that looks this like this:

this state = {
               columns : [
                          {Header: ƒ, accessor: "firstName",show: true},
                          {Header: ƒ, accessor: "status", show: true},
                          {Header: ƒ, accessor: "visits", show: true}
                         ]
             }

I have list of checkboxes that displays column names and based on the "show" flag I hide/show them.I create one more of array of objects based on checkboxes selection that something looks like:

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

Now I need to set the state of "columns" based on the value of "selectedOptions". I have to iterate through the "selectedOptions" array and then based on "value"(here I am using it as key) of each object, I need to update the corresponding "show" property of an object in the "columns".

In this example the columns array should look like after 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}
          ]

I used the following approach, but it did not work

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

解决方案

Here's my solution.

Instead of using a CheckBox data-structure Array in SelectComponent, I used a mapped Array of booleans (just for the show values) - this is just my preference.

I think your previous problems were because you were passing the same Array instance to submitSelection. React doesn't understand that App should be updated, because only the objects inside the Array have been changed, instead of the actual Array.

You could probably get it to work by just recreating the Array before submitting, but in this case you'd be mutating the values of App.columns in SelectComponent. As you know, props aren't supposed to be modified, so this is bad.

这篇关于根据对象数组中存在的属性设置状态:React + Typescript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！