Начальное состояние с реквизитом делает мое состояние неопределенным

Question

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

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

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

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

Answer 1

Вам необходимо реализовать 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
    }
  }

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

Answer 2

состояние clickableElementText

не объявлено

Использовать this.state.textInInput