将新元素插入空JSON对象

Question

我正在尝试将数据插入到空的JSON数组中，但遇到了麻烦。我在构造函数中定义数组，然后在页面加载时向后端发送一些请求，并在获得响应后，我想将新数组元素添加到现有数组。这是我正在使用的代码：

constructor() {
        super();
        this.state = {
            sds: []
        }
    }
    componentDidMount() {
      axios.get('/userData', {
          params: {
              user: this.props.auth.user.name
          }
      }).then(res => {
        for(var i=0; i<res.data[0].chemID.split(',').length; i++){
          if(res.data[0].chemID.split(',')[i] != 0){
              axios.get('/chemData', {
              params: {
                id: res.data[0].chemID.split(',')[i]
              }
             //This is where I want to insert the data
            }).then(res => this.sds += ({
              id: i,
              title: res.data[0].chemName,
              selected: false,
              key: 'sds'
            }))
          }          
        }
      })
  }

Answer 1

+=不是这样的。使用扩展运算符复制数组的先前内容，然后手动添加新对象 -}).then((res) => {   const newThing = {     id: i,     title: res.data[0].chemName,     selected: false,     key: 'sds'   };   this.setState(prevState => ({     sds: [...prevState.sds, newThing]   }))}你永远不应该试图改变状态，总是使用setState。在这种情况下，您可以将函数作为第一个参数传递，该参数提供先前的状态。这样，您可以确保this.state.sds保留的内容，并将新对象添加到该数组中。

Answer 2

您可以尝试使用下一个示例：this.state.sds[this.state.sds.length] = {           id: i,           title: res.data[0].chemName,           selected: false,           key: 'sds'         }将帖子就像@larz所说，你必须使用setState方法来避免代码的意外结果。var newSds = this.stage.sds;newSds[newSds.length] = {       id: i,       title: res.data[0].chemName,       selected: false,       key: 'sds'     };this.setState({ sds: newSds});你可以得到有关反应生命周期的详细信息在这里和“状态更新被合并” 在这里