0

Есть некий родительский компонент, который рендерит дочерний. Если родительский компонент изменяется, то он отправляет в уже отрендеренные дочерние компоненты новые пропсы. Моя проблема заключается в том, что при обновлении пропсов состояние компонента остаётся прежним и это вызывает нежелательное поведение интерфейса.

Например, в дочернем элементе есть кнопка "Показать больше", которая рендерит дочерний элемент. Я хочу сделать так, чтобы если пропсы изменились, то компонент должен обновить своё состояние:

this.setState({ isShowMoreActive: false })

Но как это правильно сделать? Метод жизненного цикла componentWillRecieveProps() устарел и скоро будет убран из Реакта, а документация советует не использовать состояние вообще, а сделать компонент функциональным.

1 ответ 1

2

На смену componentWillRecieveProps пришел getDerivedStateFromProps, почитать тут

В вашем случае как мне кажется есть такие варианты:

  • использование состояния (изменение внутреннего state компоненты)

  • сделать компонент функциональным и использовать hook useEffect (ссылка)

  • использование переменной внутри классовой или функциональной компоненты (изменились props - поменяй значение переменной)

3
  • А если просто в componentDidUpdate() сравнить текущий this.props и prevProps и в случае изменения вызвать this.setState()? 4 сен 2019 в 21:42
  • @JamesJGoodwin можно и так, но это вызовет ререндер компоненты 2 раза (при изменении props и потом при изменении state) 4 сен 2019 в 21:42
  • @JamesJGoodwin componentWillRecieveProps или getDerivedStateFromProps как раз избавит вас от повторного рендера 4 сен 2019 в 21:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.