componentDidMount 内的多个 setState答案

【问题标题】：Multiple setState inside componentDidMountcomponentDidMount 内的多个 setState
【发布时间】：2018-11-22 13:45:58
【问题描述】：

componentDidMount() 中是否可以有多个setState？

我有这种代码结构，每个控制台日志实际上都给了我正确的值。

  constructor(props) {
    super(props);

    this.state = {
      index : 0,
      index2 : 0
    };
  }

  componentDidMount() {
    fetch(url)
      .then(response => response.json())
      .then(data => {

        // 1st setState
        var index = 0;
        for (var i = 0; i < data.length; i++) {
          //somecode
        }
        this.setState({ index : index});
        console.log("this.state.index" , this.state.index); // value: 1

        // 2nd setState
        var index = 0;
        for (var i = 0; i < data.length; i++) {
          //somecode
        }
        this.setState({ index2 : index});
        console.log("this.state.index2" , this.state.index2); // value: 2
      })
  }

  render() {
    value1={this.state.index}
    value2={this.state.index2}
  }

但是，当我在render() 中调用它时，它似乎仍在使用构造函数中设置的初始值。

如何处理这种方法？谢谢！

【问题讨论】：

它们中的每一个都在触发重新渲染，因此这是一种反模式。你最好把它们打包成一个setState
你想通过这个流程实现什么？
已经在下面得到了答案。再次感谢！
祝我好运！有人只是投了反对票，作为 Javascript 的初学者，我认为通过提出如此具体和伟大的问题来更好地了解事物是件好事，我得到了答案：D

标签： javascript reactjs react-native render setstate

【解决方案1】：

是的，使用多个setState 没有问题，但不推荐使用，因为它每次都会触发渲染。尽管您可以在componentDidMount 的末尾使用一个setState。

例如：

componentDidMount() {
fetch(url)
  .then(response => response.json())
  .then(data => {

    // 1st setState
    var index = 0;
    for (var i = 0; i < data.length; i++) {
      //somecode
    }
    //this.setState({ index : index});
    console.log("this.state.index" , this.state.index);

    // 2nd setState
    var index = 0;
    for (var i = 0; i < data.length; i++) {
      //somecode
    }
    //this.setState({ index2 : index});
    this.setState({
      index,
      index2: index,
      key1: value1,
    })
    console.log("this.state.index2" , this.state.index2);
  })
}

【讨论】：

啊！我得到了它！它就像一个魅力:) 非常感谢！