Question

在我的componentwillmount方法中，我需要初始化组件的状态，并且我想使用update＆return new state而不是多次执行setState

我的代码现在是

componentWillMount() {
    this.setState(
        data1: doSomeCalculationAndReturnData1
    );
    //do other processX
    this.setState(
        data2: doSomeCalculationAndReturnData2
    );
    //do other processY
}

我想这样做，但是当我尝试第二种方法时它不起作用，请告知我

componentWillMount() {
    //do other processX
    //do other processY
    return {
        ...state,
        data1: doSomeCalculationAndReturnData1
        data2: doSomeCalculationAndReturnData2
    }
}

Answer 1

在最新的React版本（16.5.1）中，componentWillMount方法标记为已弃用。 “通常，我们建议使用构造函数（）代替初始化状态”-引用官方文档。

但是，componentWillMount中的返回值不会影响任何更改，您应该将setState与参数一起使用，该参数包含两个属性data1和data2。

setState({
    data1: doSomeCalculationAndReturnData1,
    data2: doSomeCalculationAndReturnData2
})

Answer 2

您可以简单地这样做

componentWillMount = () => {
    this.setState({
        data1: do_some_calculation_and_return_data_1,
        data2: do_some_calculation_and_return_data_2
    })
}

或者您可以使用constructor方法

Answer 3

您可以按照以下方式设置状态。同样，您也不想散布现有状态，因为在这种情况下它是无用的操作。

componentWillMount() {
    const data1 = computedData1;
    const data2  = computedData2;
    this.setState({data1, data2});
}

Answer 4

在组件的constructor上执行此操作的最佳方法。您可以在此处初始化状态而无需调用setState。

constructor(props) {
  super(props);

  //do other processX
  //do other processY

  this.state = {
    data1: doSomeCalculationAndReturnData1,
    data2: doSomeCalculationAndReturnData2
  };
}

如何在React组件中更新和返回状态

4 个答案: