Родительский компонент переопределяется при получении новых реквизитов, но его дочерний компонент не переопределяется. Дочерние компоненты визуализируются только в первый раз и никогда не переопределяются и не получают реквизиты из хранилища избыточности
Я получаю обновленные данные из хранилища избыточности в родительском компоненте, но не в дочерних компонентах. Дочерние компоненты получают данные из хранилища приращений только при первом отображении
Мой родительский компонент Home.js
Объект seaFCLJSON выглядит следующим образом const seaFCLJSON ={"rates": {"sort":"faster", "someOther": "someOtherValues"}};
при добавленииМагазин обновляется, seaFCLJSON выглядит следующим образом const seaFCLJSON ={"rates": {"sort":"cheaper","someOther": "someOtherValues"}};
class Home extends Component {
state = {
seaFCLJSON: {}
};
componentDidMount = () => {
this.setState({ seaFCLJSON: this.props.seaFCLJSON });
};
componentWillReceiveProps = nextProps => {
if (this.state.seaFCLJSON !== nextProps.seaFCLJSON) {
this.setState({ seaFCLJSON: nextProps.seaFCLJSON });
}
};
render() {
const { seaFCLJSON } = this.props;
return (
<>
{!isEmpty(seaFCLJSON) && seaFCLJSON.rates && seaFCLJSON.rates.fcl ? (
<FCLContainer fclJSON={seaFCLJSON} />
) : null} //it never rerenders upon getting updated data from redux store
<h5>{JSON.stringify(seaFCLJSON.rates && seaFCLJSON.rates.sort)}</h5> //it rerenders everytime upon getting updated data from redux store
</>
);
}
}
const mapStateToProps = state => {
return {
seaFCLJSON: state.route.seaFCLJSON
};
};
export default connect(
mapStateToProps,
actions
)(Home);
isEmpty.js
export const isEmpty = obj => {
return Object.entries(obj).length === 0 && obj.constructor === Object;
};
Мой дочерний компонент FCLContainer.js
class FCLContainer extends Component {
state = {
seaFCLJSON: {}
};
componentDidMount = () => {
this.setState({ seaFCLJSON: this.props.seaFCLJSON });
};
componentWillReceiveProps = nextProps => {
console.log("outside state value: ", this.state.seaFCLJSON);
if (this.state.seaFCLJSON !== nextProps.seaFCLJSON) {
this.setState({ seaFCLJSON: nextProps.seaFCLJSON });
console.log("inside state value: ", this.state.seaFCLJSON);
}
};
render() {
const { seaFCLJSON } = this.state;
console.log("rendering .. parent props: ", this.props.fclJSON);
console.log("rendering .. redux store props: ", this.props.seaFCLJSON);
return (
<>
<div className="home-result-container">
<div>
<h5>This child component never rerenders :(</h5>
</div>
</div>
</>
);
}
}
const mapStateToProps = state => {
return {
seaFCLJSON: state.route.seaFCLJSON
};
};
export default connect(
mapStateToProps,
actions
)(FCLContainer);
Не знаюНе знаю, есть ли проблемы в родительском компоненте или проблемы в дочернем компоненте. componentWillReceiveProps вызывается в родительском компоненте, но не в дочернем компоненте. Пожалуйста, игнорируйте любые пропущенные точки с запятой или фигурные скобки, потому что я опустил некоторые ненужные коды. Изменить 1: Я просто продублировал значение из реквизита в состояние только для целей отладки.
Буду признателен за вашу помощь. Спасибо.
Редактировать 2 : Я непосредственно изменял объект в действиях с избыточностью. Вот почему CWRP не уволили. Это была проблема. Для получения дополнительной информации проверьте мой ответ ниже.