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

您需要使用push()这样的方法添加到数组中：

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.state.sds.push({
            id: i,
            title: res.data[0].chemName,
            selected: false,
            key: 'sds'
          })
        })
      }          
    }
  })
 }

Answer 3

您可以尝试使用下一个示例：

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

您可以在react here和“状态更新已合并” here

中获取有关生命周期的更多信息。

Answer 4

You can use array.push().
this.state.sds.push(obj);

如果您不使用react setState方法，则需要使用this.state.variableName引用任何状态变量。

将新元素插入空JSON对象

4 个答案: