Несколько setState внутри componentDidMount

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, но это не рекомендуется, потому что это будет вызывать рендеринг каждый раз.Inspite вы можете использовать один 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);
  })
}