Как получить сумму значений состояния дочернего компонента в родительском компоненте при первой загрузке?
Я пытался иметь родительский компонент с атрибутом состояния "сумма". Есть 2 дочерних компонента с атрибутом состояния «значение» со значениями 1 и 2 соответственно.
При загрузке приложения я хочу, чтобы Parent показывал «3». В настоящее время я вызываю родительский метод из дочернего с помощью componentDidMount(), но в родительском после this.setState() значения не обновляются!
Child:
componentDidMount() {
this.props.calculateTotal(this.state.value);
}
Parent:
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
total: 0
};
}
calculateTotal = value => {
console.info("value ", value);
const calculatedTotal = this.state.total + value;
console.info("calculatedTotal ", calculatedTotal);
this.setState({
total: calculatedTotal
});
console.info(
"total after setting state",
this.state.total
);
};
}
В Parent я ожидал, что totalValue получит сумму, но этого не происходит.
Любая помощь в этом отношении будет полезной.
Ответы 1
Вы можете попробовать то же самое в обратном вызове setState, и новое значение отразится. Поскольку setState не происходит синхронно, ваш непосредственный console.info после setState игнорируется.
Проверьте следующее, это должно делать то, что вы пытаетесь сделать, я использую параметр prevState для доступа к текущему состоянию вместо this.state.total + value:
calculateTotal = value => {
this.setState(prevState => ({
total: prevState.total + value;
}, () => {
console.info("total after setting state", this.state.total);
console.info("This callback will show the new value");
}));
console.info("This will NOT show the new value", this.state.total);
};
}
Надеюсь, это полезно!