Как сделать принудительно обновление компонента при вызове setState()?

Question

[Иван Павленко]

История какая, для отображения вложенных страниц я использую следующую конструкцию.

class Screen extends Componen {
  constructor(props) { 
    super(props)

    this.state = {
      screen: undefined
    }
  }

  render() {
    return this.state.screen ? this.state.screen : <div className="content">
    </div>
  }
}

Далее вызовом
this.setState({screen: <MyMyComponenr/>})
можно менять страницу, она удобно перерисовывается, и все было бы хорошо если бы не одно маленькое но. Если screen ранее был установлен в такой же компонент, то он не перерисовывается при казалось бы присвоении нового компонента.
Нашел выход в виде следующего костыля:

this.setState({screen: undefined}, ()=>{
    this.setState({
      screen: <ShowScreen />
    })
  })
}}

Но, что-то мне подсказывает, что я в чем то неправ.
Если ли какой то способ указать реакту, что это новый компонент, и что его надо рендерить заново.

Comments

[Роман Александрович]

вы можете просто менять значение флага в стейте на противоположный

this.setState({
      screen: <ShowScreen />,
someFlag:!this.state.someFlag
    })

[Mikhail Osher]

Пример на codesandbox покажите

[Антон Спирин]

История какая, для отображения вложенных страниц я использую следующую конструкцию.

Полагаю, что про nested routes вы не слышали.

[Иван Павленко]

Mikhail Osher, https://codesandbox.io/s/m5xqlx4wwj

Жмем на кнопку, должно меняться значение, но оно не меняется =(

[Иван Павленко]

Роман Александрович, неработае =(
https://codesandbox.io/s/m5rxzjr3w9

Answer 1

[davidnum95]

this.setState({ screen: <Random key={Math.random()} /> });

Не благодари.

Comments

[Иван Павленко]

Работает =) Конечно, то чувство, что что то идет не так меня не покинуло, но кода стало меньше. Этот вариант пока в топе предложенных решений.

[davidnum95]

Иван Павленко, конечно идет не так. Это нифига не react like подход.

Answer 2

[Mikhail Osher]

Что происходит. Реакт понимает, что надо отрендерить один и тот же компонент, поэтому он его не пересоздаёт. Если Вы добавите метод componentDidUpdate, то увидите, что он вызывается – Реакт переиспользует существующий инстанс компонента.
Проблема в том, что это так себе подход в React. Чтобы, на мой взгляд, более лаконично написать этот пример в React way – надо немного исправить отвественность каждого компонента.
https://codesandbox.io/s/2vl0801r6r

Comments

[Иван Павленко]

Не, не так, задача состоит не в том, чтобы изменить значение value на случайное, а присвоить значению screen новый компонент. Мой пример был простой, в проекте же вместо рандома сложные структуры с вложенными страницами, ajax вызовами и прочей мишурой. Вместо кнопки "жми меня" кнопки бокового меню при нажатии на которые строятся страницы отображающие контент приложения, в том числе и многостраничные. Повторное нажатие на кнопку меню должно как бы возвращать нас на начало страницы, но из за оптимизации этого не происходит.

Как я понимаю, проблема в чем, при присвоении схожего объекта, оптимизация setState не создает новый объект, а оставляет старый. При этом если в моем примере вынести рандом из конструктора в тело render или как у вас, передать его как параметр, он будет перерисовывать, но это будет делать рендер одного и того же объекта а не каждый раз разного.

[Mikhail Osher]

Иван Павленко, в Вашем случае надо слушать componentDidUpdate