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

Question

У меня есть родительский компонент, передающий состояние в качестве подпорки дочернему компоненту.API вызывается при загрузке страницы с использованием componentDidMount в родительском компоненте, и исходное состояние данных, передаваемых дочернему, изменяется.Изменение отражается в родительском компоненте, но не в дочернем.

Вот выдержка из моего кода:

loan.js (Parent)

<ForecloseBtn id={this.state.lead_id} foreclose={this.state.isForeclosed }/>

ForecloseBtn.js (дочерний)

import React from 'react';
import { render } from 'react-dom';

class ForecloseBtn extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props);
        this.state = {
            lead_id: this.props.id,
            isForeclosed: this.props.foreclose,
        };
    }

    render() {

        return (
            ......
        )
    }
};

export default ForecloseBtn;

Таким образом, здесь состояния lead_id и isForeclosed изменяются в родительском компоненте, но не в дочернемсоставная часть.Как я могу также обновить состояние дочернего компонента?

Answer 1

Вот почему в вашем дочернем компоненте вы только подготавливаете реквизиты в конструкторе и соответственно устанавливаете его состояние;если они изменятся позже, вы не обновите состояние дочернего компонента, поэтому повторная визуализация не будет выполнена.

Существует несколько вариантов решения проблем, самый простой из которых - не использовать состояние в дочернем компоненте, нонапрямую props;в этом случае, как только родительский компонент обновлен, новый реквизит вызовет повторную визуализацию дочернего компонента.Это также самое чистое решение, у вас будет только один источник правды, а именно реквизиты, передаваемые от родительского к дочернему компоненту.

Кроме того, вы можете использовать componentDidUpdate в дочернем элементе и обновлять его состояние на основе новых реквизитов, полученных от родителя:

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.id !== prevProps.id) {
    this.setState({ lead_id: this.props.id });
  }
  if (this.props.foreclose !== prevProps.foreclose) {
    this.setState({ isForeclosed: this.props.foreclose });
  }
}

Answer 2

Здесь возможны два решения:

Первый

Вам действительно нужно сохранить state, который вы отправляете как props от родителя?как state на ребенка?Почему бы вам не использовать их так просто, как они?Ваш ребенок выполнит рендеринг, когда они изменятся.

Секунда

Если вам абсолютно необходимо сохранить их как state для ребенка, вы можете визуализировать ребенка сключ prop, который должен меняться всякий раз, когда вы хотите, чтобы ваш ребенок перемонтировал полностью, потому что вам нужен способ, чтобы ваша функция конструктора снова запустилась.

Что-то вроде:

<ForecloseBtn 
  id={this.state.lead_id} 
  foreclose={this.state.isForeclosed }
  key={this.state.lead_id}
/>

Youследует прочитать это, хотя:

Вам, вероятно, не нужно производное состояние ...

Answer 3

Вы должны использовать метод componentDidUpdate в своем дочернем Компоненте:

componentDidUpdate (prevProps) {
  if(prevProps.id !== this.props.id || prevProps.foreclose !== this.props.foreclose){
    this.setState({
      lead_id: this.props.id,
      isForeclosed: this.props.foreclose,
    })
  }
}

Каждый раз, когда изменяется ваше состояние или реквизиты, вызывается этот метод, и мы сбрасываем lead_id и isForeClosed только в случае смены реквизита.

Answer 4

class ForecloseBtn extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
        this.state = {
            lead_id: props.id,
            isForeclosed: props.foreclose,
        };
    }

    render() {

        return (
            ......
        )
    }
};

Вам не нужно this до props в конструкторе дочерних компонентов