Question

setState内可以有多个componentDidMount()吗？

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

  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()中调用它时，似乎仍然使用构造函数中设置的初始值。

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

Answer 1

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

例如：

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

componentDidMount中的多个setState

1 个答案: