Состояние настройки на компонентеDidMount()

Я знаю, что это анти-шаблон для установки состояния на componentDidMount, и состояние должно быть установлено на componentWillMount, но предположим, что я хочу установить длину числа тегов li как состояние. В этом случае я не могу установить состояние на componentWillMount, так как теги li, возможно, не были смонтированы на этом этапе. Итак, какой должен быть лучший вариант здесь? Будет ли это нормально, если я установил состояние на componentDidMount?

Ответы

Ответ 1

Это не анти-шаблон для вызова setState в componentDidMount. Фактически, ReactJS предоставляет пример этого в своей документации:

Вы должны заполнить данные вызовами AJAX в методе жизненного цикла componentDidMount. Это позволяет использовать setState для обновления вашего компонента при получении данных.

Пример из документа

componentDidMount() {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
        // Note: it important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

Ответ 2

В соответствии с документацией React совершенно нормально вызывать setState() из функции componentDidMount().

Это приведет к тому, что render() будет вызван дважды, что менее эффективно, чем вызов только один раз, но в остальном он прекрасно работает.

Вы можете найти документацию здесь:

https://reactjs.org/docs/react-component.html

Вот выдержка из документации:

Вы можете вызвать setState() немедленно в componentDidMount(). Это вызовет дополнительный рендеринг, но это произойдет до того, как браузер обновит экран. Это гарантирует, что даже если render() будет вызываться дважды в этом случае, пользователь не увидит промежуточное состояние. Используйте этот шаблон с осторожностью, потому что он часто вызывает проблемы с производительностью...

Ответ 3

Если вы передаете реквизиты компоненту и хотите обновить состояние в соответствии с реквизитами, вы должны использовать setTimeout или setInterval или отправлять запросы AJAX.

this.state = {
    favourite: null,
    job_applied: null,
}

componentDidMount() {
    setTimeout(() => {
        if (this.props.wishlist == true) {
            this.setState({ favourite: true });
        }
        if (this.props.job_applied == true) {
            this.setState({ job_applied: true });
        }
    }, 300)
}