Состояние инициализации с помощью реквизита делает мое состояние неопределенным

Я быстро создал эту песочницу, чтобы упростить объяснение моей проблемы.

Я хочу, чтобы при нажатии на мой clickableItem значение ввода из компонента simplePopOver принимало значение из состояния из компонента clickableItem.

Для этого я инициализирую состояние из simplePopOver с реквизитом, но проблема в том, что состояние всегда равно начальному значению 'initialisation', тогда как реквизит имеет хорошее значение (проверьте console.log()). У вас есть идея? Это асинхронная проблема?

Я не думаю, что мои объяснения понятны, но если вы проверите песочницу, это будет более понятно :)


reactjs react-props
person johannchopin    schedule 18.02.2019    source источник
comment
this.state.textInInput , а не this.state.clickableElementText   -  person Mohamed Ramrami    schedule 18.02.2019
comment
@MohamedRamrami Обновлено. Спасибо :) Но теперь значение state всегда равно значению инициализации 'initialisation' :( Похоже на асинхронную проблему   -  person johannchopin    schedule 18.02.2019
comment
Вы видели, stackoverflow.com/questions/50403693/ ?   -  person iridescent    schedule 18.02.2019

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно реализовать getDerivedStateFromProps для обновления состояния на основе изменения реквизитов в компоненте SimplePopover

static getDerivedStateFromProps(props, state) {
    console.log(props);
    if (props.clickableElementText !== state.prevClickableElementText) {
      return {
        prevClickableElementText: props.clickableElementText,
        textInInput: props.clickableElementText,
      }
    }
    return {
      prevClickableElementText: props.clickableElementText
    }
  }

Рабочая демонстрация

person Shubham Khatri    schedule 18.02.2019
comment
Он работает отлично! Спасибо :) Использование этого метода является хорошей практикой? - person johannchopin; 18.02.2019
comment
Есть несколько альтернатив getDerivedStateFromProps, которые вы можете использовать в зависимости от вашего варианта использования. Вы можете ознакомиться с документацией для более подробной информации. Для вашего варианта использования getDerivedStateFromProps является правильной альтернативой - person Shubham Khatri; 18.02.2019

arrow_upward
0
arrow_downward

состояние clickableElementText

это не объявлено

Используйте это.state.textInInput

person Diego Lopez    schedule 18.02.2019
comment
Пожалуйста, найдите время, чтобы отформатировать свой ответ правильно - person Treycos; 18.02.2019
comment
Упс, небольшая ошибка, я изменил его :) Спасибо - person johannchopin; 18.02.2019