Перерисовать дочерний компонент при изменении состояния родительского компонента

Question

Я использую react-navigation для навигации между двумя экранами при передаче данных между ними.

Расход: Экран A (передает данные) -> Экран B -> (обновляет и передает данные обратно) Экран A.

На экране A я использую дочерний компонент, который необходимо обновлять / перерисовывать при получении данных с экрана B.

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

Главный экран:

updateCount(data) {
    // Logic to update state of a counter variable
    this.setState({ count: data })
}

// and then later on in the code, I'm calling the child Component 'B'        
<B prop={this.state.count} />

Компонент B:

componentWillMount() {
// based on value of this.props.count, I'm setting the value of 'text' in this component
    if(this.props.count == 1) {
       this.setState({text: 'abc'})
    } else {
       this.setState({text: 'cde'})
    }
}

// later on in the code, render method:
<View>
   <Text>
     {this.state.text}
   </Text>
</View>

Answer 1

Обновление компонента B: (код ниже)

    constructor(props) {
            super(props);
            this.state = {
                count: props.count
            };
         }

        componentWillReceiveProps(nextProps) {
           if (nextProps.count != this.props.count){
                this.setState({
                count: nextProps.count
            })
          }
        }

       componentDidMount() {
             this.setTextValue();
       }

         componentWillUpdate() {
             this.setTextValue();
       }

         setTextValue = () => {
           if(this.state.count == 1) {
               this.setState({text: 'abc'})
           } else {
              this.setState({text: 'cde'})
            }
         }

Включите оставшуюся часть кода.

Изучите реакцию lifecycle methods хорошо.

Answer 2

Отвечая на мой вопрос, потому что я понял, что не обновляю значение prop в коде моего компонента, чтобы отразить изменение состояния родительского элемента.повторный рендеринг при изменении состояния - это ОСНОВНОЙ Реактив его работы.Я использовал react-devtools для отладки и выяснения жизненного цикла моего дочернего компонента.Теперь все работает!Не уверен, что мне нужны хуки / другие методы жизненного цикла для этой простой функциональности, но я ценю помощь всех!

Answer 3

Вы должны будете использовать componentDidUpdate с этим. Однако, если вы используете хуки, это выбьет как componentDidMount, так и componentDidUpdate. Для вашего примера с использованием классов, вероятно, это будет что-то вроде этого.

    componentdidUpdate(prevProps, props) => {
      if(prevProps.count !== this.props.count){
    if(this.props.count == 1) {
      this.setState({text: 'abc'})
       }
        else {
     this.setState({text: 'cde'})
      }}

Однако, согласно документам, эти методы считаются устаревшими, и их следует избегать в новом коде:

UNSAFE_componentWillMount ()

Отбросьте это в пользу componentDidMount и componentDidUpdate, или переключитесь на хуки (это лучший вариант!)