Question

我尝试使用状态属性为“ sum”的Parent组件。有2个子组件，其状态属性为“值”，分别具有值1和2。

在应用程序加载时，我希望“父母”显示“ 3”。当前，我正在使用componentDidMount（）从Child调用Parent方法，但是在this.setState（）之后的parent中，值没有更新！

Child:
componentDidMount() {
    this.props.calculateTotal(this.state.value);
  }

Parent:
class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0
    };
  }

calculateTotal = value => {
    console.log("value ", value);
    const calculatedTotal = this.state.total + value;
    console.log("calculatedTotal ", calculatedTotal);
   this.setState({
      total: calculatedTotal
    });
    console.log(
      "total after setting state",
      this.state.total
    );
  };
}

在“父级”中，我希望'totalValue'能够获得总和，但是这没有发生。

在这方面的任何帮助都会有所帮助。

Answer 1

您可以在setState的回调中尝试相同的操作，新值将反映出来。由于setState不会同步发生，因此setState之后的立即console.log将被忽略。

检查以下内容，这应该可以完成您要执行的操作，我使用prevState参数来访问当前状态，而不是执行this.state.total + value：

calculateTotal = value => {
   this.setState(prevState => ({
      total: prevState.total + value;
    }, () => {
      console.log("total after setting state", this.state.total);
      console.log("This callback will show the new value");
    }));
    console.log("This will NOT show the new value", this.state.total);
  };
}

希望这会有所帮助！

第一次加载时如何获取父组件中子组件状态值的总和？

1 个答案: