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

【问题标题】：React js Warning: Cannot update during an existing state transition (such as within `render`)React js警告：在现有状态转换期间无法更新（例如在`render`中）
【发布时间】：2020-06-25 16:55:09
【问题描述】：

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

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

【解决方案1】：

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

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

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

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

【讨论】：