将新元素插入空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});

你可以得到有关反应生命周期的详细信息在这里和“状态更新被合并” 在这里