时间戳

首页 > 解决方案 > React js警告：在现有状态转换期间无法更新（例如在`render`中）

reactjs - React js警告：在现有状态转换期间无法更新（例如在`render`中）

问题描述

我对反应代码不太熟悉。我试图获取状态的百分比和计算的百分比，以便我可以将百分比值保存到数据库中。我有以下代码：

getTotalPercentage(){

let totalCost = this.getTotalCost();
let total = this.getGrandTotal();

let per = parseFloat(total / totalCost * 100).toFixed(4);

if (isNaN(per)){
  return 0 + " %";
}

const prev = parseFloat(this.state.percentage);
const next = parseFloat(per);
if(prev !== next){
  console.log(this.props);
  this.setState({ percentage: next});
}

return next + " %";

}

而作为回报

<input
            onChange={this.changePercentage.bind(this)}
            name="percentage"
            type="text"
            value={this.getTotalPercentage()}
            className="input-sm"
            readOnly
          />

但我收到以下错误

警告：在现有状态转换期间无法更新（例如在 内render）。渲染方法应该是 props 和 state 的纯函数。

标签： reactjs

解决方案

问题在getTotalPercentage. 每次 react 进行渲染时，您都会调用此函数。但是在这个函数内部，你setState. React 会阻止您这样做以避免无限循环的渲染（您 setState 然后重新渲染然后重复更新状态）。

要解决这个问题，请将所有逻辑从getTotalPercentage函数changePercentage中移出。

然后将输入组件中的值更改为：

value={`${this.state.percentage}%`}

推荐阅读