javascript - 如何使用同一类的另一个方法更新构造函数中的状态？

Question

我有一个带有构造函数的组件:

<code lang="javascript">
class Day extends Component {
  constructor(props) {
    super(props);
    this.state = {
      calories: 0,
      fat: 0,
      protein: 0,
      carbs: 0,
    };

    this.caloriesCalculate();
  }
</code>

我有一个方法caloriesCalculate()。它有这样的代码:

<code lang="javascript">
caloriesCalculate() {

    var fat = 0;
    var protein = 0;
    var carbs = 0;
    var calories = 0;

    const { dataArray, mealPlan, date } = this.props;
    const { products } = dataArray;

    var timestamp = date._i/1000;
    Object.keys(mealPlan[timestamp]).map(function(type) {
      var product = products[mealPlan[timestamp][type]];
      fat += product.fat/1000;
      protein += product.protein/1000;
      carbs += product.carb/1000;
      calories += product.calories/1000;
    });

    var nutritions = {
      calories: calories,
      fat: fat,
      protein: protein,
      carbs: carbs,
    }

    this.setState(nutritions);
  }
</code>

当我将其分配给按钮单击时，该方法效果很好:

<code lang="javascript">
onClick={() => this.caloriesCalculate()}
</code>

但是如果该方法是从构造函数执行的，则状态的值为零。同时，如果我执行 console.log(nutritions);，它会在控制台中显示有效值，但在 render() 内部显示 - 零值。

在 render() 中我有这个:

<code lang="javascript">
<li className='day-calories'><b>Calories:</b> {calories}, <b>Fat:</b> {fat}g, <b>Protein:</b> {protein}g, <b>Carbs:</b> {carbs}g</li>
</code>

如果我将在构造函数中使用父组件的 props 中的值 - 它将进行相同的计算，但在父组件内部。

我可以在构造函数中进行计算 - 但这也是关于双重计算( onClick={() => this.caloriesCalculate()} - 它不是用于测试或用于调试，我使用此按钮和此方法)。

我做错了什么？ 为什么 this.calculateCalories() 不从构造函数中获取有效数据？

Answer 1

您使用 setState - 在构造函数中是异步的，请尝试将函数调用移动到另一个生命周期，例如 componendDidMount

class Day extends Component {
  state = {
    calories: 0
    ...
  };

  componendDidMount = () => {
    this.caloriesCalculate();
  };

  caloriesCalculate = () => {
    // ... set nutritions
    this.setState(nutritions);
  };
}

Side Note: Avoid using var write more concise code.