Question

我开始学习React，我很难以在Json中收到的状态保存我的组的名称Installatins。

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

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

请给我每个组的最新安装名称。

如何将所有安装保存为已选择的组状态？

我在做什么错了？

Answer 1

setState是异步的，所以我的猜测是映射此行：

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

是问题。

您要告诉它通过解构当前状态数组并添加新值来将NameInstallation添加到状态数组中，但是由于setState的异步特性，您不能保证{{ 1}}将具有更新的状态数组。

请尝试使用...this.state.nameInstallGroup的更新程序形式，以确保您使用的是最新状态副本：

setState

Answer 2

当您需要对状态更改做出反应时，建议使用componentDidUpdate生命周期方法，而不要使用this.setState回调。

如果我正确理解，您想将this.state.nameInstallGroup设置为JSON Installations数组内的字符串。

handleChange(event) {
  this.setState({ value: event.target.value })
}

componentDidUpdate(prevProps, prevState) {
  const { value, groups } = this.state

  if (value === prevState.value) return

  const { Installations } = groups.find(group => value === group.IdGroup)

  this.setState({ 
    nameInstallGroup: Installations
      .map(({ NameInstallation }) => NameInstallation) 
  })
}

方法onChange只是获取最后一个数组值

2 个答案: