Javascript 方法onChange仅获取最后一个数组值

我开始学习React，我很难将组的名称Installatins保存为Json格式

class EditionGroup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      installations: [],
      groups: [],
      nameInstallGroup: [],
    };

my

JSON

：

"Default": [
    {
      "IdGroup": "1",
      "NameGroup": "Group1",
      "Installations": [
        {
          "IdInstallation": "1",
          "NameInstallation": "Installation 1"
        },
        {
          "IdInstallation": "2",
          "NameInstallation": "Installation 2"
        },
        {
          "IdInstallation": "3",
          "NameInstallation": "Installation 3"
        },
        {
          "IdInstallation": "4",
          "NameInstallation": "Installation 4"
        }
      ]
    },
    {
      "IdGroup": "2",
      "NameGroup": "Group2",
      "Installations": [
        {
          "IdInstallation": "5",
          "NameInstallation": "Installation 5"
        },
        {
          "IdInstallation": "6",
          "NameInstallation": "Installation 6"
        },
        {
          "IdInstallation": "7",
          "NameInstallation": "Installation 7"
        },
        {
          "IdInstallation": "8",
          "NameInstallation": "Installation 8"
        }
      ]
    },
    {
      "IdGroup": "3",
      "NameGroup": "Group3",
      "Installations": [
        {
          "IdInstallation": "9",
          "NameInstallation": "Installation 9"
        },
        {
          "IdInstallation": "10",
          "NameInstallation": "Installation 10"
        },
        {
          "IdInstallation": "11",
          "NameInstallation": "Installation 11"
        },
        {
          "IdInstallation": "12",
          "NameInstallation": "Installation 12"
        }
      ]
    },
    {
      "IdGroup": "4",
      "NameGroup": "Group4",
      "Installations": [
        {
          "IdInstallation": "13",
          "NameInstallation": "Installation 13"
        },
        {
          "IdInstallation": "14",
          "NameInstallation": "Installation 14"
        }
      ]
    },
    {
      "IdGroup": "5",
      "NameGroup": "Group5",
      "Installations": [
        {
          "IdInstallation": "15",
          "NameInstallation": "Installation 15"
        },
        {
          "IdInstallation": "16",
          "NameInstallation": "Installation 16"
        }
      ]
    }
  ]
}

我的方法

handleChange(event) {
    this.setState({ value: event.target.value }, () => {
      return this.state.groups.map((groupOption, index) => {
        const { IdGroup, NameGroup, Installations } = groupOption; // destructor

        if (this.state.value === IdGroup) {
          console.log('true');
          groupOption.Installations.map((installFromGroup, index2) => {
            const { IdInstallation, NameInstallation } = installFromGroup; // destructor

            this.setState({ nameInstallGroup: [...this.state.nameInstallGroup, NameInstallation] });
            console.log(NameInstallation);
            console.log(this.state.nameInstallGroup);
          });
        }
      });
    });
  }

请告诉我每个组的最后安装名称

如何在已选择的组状态下保存所有安装

---

我做错了什么？

setState

是异步的，所以我猜映射这一行：

this.setState（{nameInstallGroup:[…this.state.nameInstallGroup，NameInstallation]}）；

这就是问题所在

您告诉它通过解构当前状态数组并添加一个新值，将

NameInstallation

添加到您的状态数组中，但是由于

setState

的异步性质，您不能保证

…this.state.nameInstallGroup

将具有更新的状态数组

请尝试使用更新程序表单

setState

，以确保您使用的是状态的最新副本：

this.setState（（prevState）=>（{
…国家，
nameInstallGroup:[…prevState.nameInstallGroup，NameInstallation]
}));

setState

是异步的，所以我猜映射这一行：

this.setState（{nameInstallGroup:[…this.state.nameInstallGroup，NameInstallation]}）；

这就是问题所在

您告诉它通过解构当前状态数组并添加一个新值，将

NameInstallation

添加到您的状态数组中，但是由于

setState

的异步性质，您不能保证

…this.state.nameInstallGroup

将具有更新的状态数组

请尝试使用更新程序表单

setState

，以确保您使用的是状态的最新副本：

this.setState（（prevState）=>（{
…国家，
nameInstallGroup:[…prevState.nameInstallGroup，NameInstallation]
}));

当您需要对状态更改做出反应时，建议使用生命周期方法，而不是

此.setState

回调

如果我理解正确，您希望将

this.state.namesinstallgroup

设置为JSON的

Installations

数组中的字符串

handleChange（事件）{
this.setState（{value:event.target.value}）
}
componentDidUpdate（prevProps、prevState）{
const{value，groups}=this.state
if（value==prevState.value）返回
const{Installations}=groups.find（group=>value==group.IdGroup）
这个.setState（{
名称安装组：安装
.map（（{NameInstallation}）=>NameInstallation）
})
}

当您需要对状态更改做出反应时，建议使用生命周期方法，而不是

此.setState

回调

如果我理解正确，您希望将

this.state.namesinstallgroup

设置为JSON的

Installations

数组中的字符串

handleChange（事件）{
this.setState（{value:event.target.value}）
}
componentDidUpdate（prevProps、prevState）{
const{value，groups}=this.state
if（value==prevState.value）返回
const{Installations}=groups.find（group=>value==group.IdGroup）
这个.setState（{
名称安装组：安装
.map（（{NameInstallation}）=>NameInstallation）
})
}

让我们看看您的声明，教授，我忘了显示这个。我将编辑问题值更改后的预期状态是什么？字符串数组

['Installation 10'，'Installation 11'…]

在

this.state.namesinstallgroup

中？让我们看看你的state声明，我忘了显示这个。我将编辑问题值更改后的预期状态是什么？字符串数组

['Installation 10'，'Installation 11'…]

在

this.state.nameSinstallGroup

中？您的回答对我很有帮助，但当更改组时，前一组的安装仍然有效。您能否发布一个示例，说明您希望状态如何处理？我不太确定所需的输出是什么。这不是必需的，我解决了这个问题，在方法的开头放置->this.setState（{nameInstallGroup:[]}）；你们的回答对我很有帮助，但当更改组时，前一个组的安装仍然是可用的。你们能举一个例子说明你们希望州政府如何管理吗？我不太确定所需的输出是什么。这不是必需的，我解决了这个问题，在方法的开头放置->this.setState（{nameInstallGroup:[]}）；