Невозможно установить состояние после выполнения componentDidMount

Question

У меня есть следующая переменная state и метод componentDidMount для моего компонента:

  state = {
    categorized_items: []
  }
  componentDidMount() {
    this.props.fetchItems()
    // I'm trying to do the following
    console.log('uncat_items: ', this.props.uncat_items)
    this.setState({categorized_items: this.props.uncat_items})
  }
  render () {....}

  function mapStateToProps({ items_reducer }) {
    return {
     uncat_items: items_reducer.uncat_items
    }
  }

Метод действия this.props.fetchItems() извлекает несколько элементов и обновляет uncat_items в хранилище с избыточностьюпросто отлично (я вижу ожидаемые значения переменной this.props.uncat_items в методах рендеринга / других без проблем).Однако, что мне нужно сделать для этого конкретного случая, это сразу после выполнения метода fetchItems и обновления uncat_items в хранилище, мне нужно вызвать setState и обновить categorized_items в состоянии с помощью uncat_items.Я знаю, что вызывать this.setState в методе componentDidMount, как это неправильно, но я не знаю, как это сделать.Как вы можете видеть, я попытался распечатать this.props.uncat_items, но он возвращает пустой массив, даже если он выполнил метод действия и правильно обновил в редукторе.Может кто-нибудь, пожалуйста, дайте мне идею, как сделать это правильно?Как правило, после выполнения componentDidMount задайте состояние с помощью определенной переменной из обновленного хранилища избыточных данных.

Answer 1

Проблема в вашем коде состоит в том, что вы вызываете асинхронное действие (this.props.fetchItems()), а затем немедленно вызываете this.setState() - что происходит до завершения запроса fetchItems (таким образом, до заполнения props.uncat_items).

Предполагая, что вы используете новейшую версию React, в зависимости от вашего конкретного случая использования вы можете:

1) удалить состояние и просто напрямую использовать this.props.uncat_items в функции рендеринга.

2) Используйте static getDerivedStateFromProps для обновления состояния из-за новых реквизитов.

Однако , как упомянуто в документах , это не очень рекомендуется, так как большинство случаев может бытьобрабатываются по-разному (например, путем переключения на контролируемый компонент, как указано в решении № 1).Более подробное описание можно найти в этой статье , которая также упоминается в документации.

Answer 2

Вы можете использовать метод жизненного цикла componentDidUpdate.Похоже, что когда ваш компонент монтируется, ваш магазин может все еще содержать значение по умолчанию для этого элемента состояния.Затем он корректно обновляется в хранилище приставок, как вы упомянули, но состояние компонента не обновляется.

Чтобы обновить состояние компонента после получения компонентом новых реквизитов:

componentDidUpdate(prevProps){
  // compare prevProps to current props and update
  if(this.props.uncat_items !== prevProps.uncat_items) {
    this.setState({categorized_items: this.props.uncat_items})
    }
  }

Как упомянуто вкомментарии, использование реквизита непосредственно в методе рендеринга - более идеальное решение, так как вы не хотите, чтобы ваш компонент без необходимости повторно визуализировал.