我創建了簡單的類并接受了這個錯誤。在類中使用帶引數的方法有什么問題？
我賦予方法的純粹價值。
class ClassCounter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.changeCount = this.changeCount.bind(this);
}
changeCount (value) {
this.setState({count: value})
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.changeCount(this.state.count 1)}>Increment</button>
<button onClick={this.changeCount(this.state.count - 1)}>Decrement</button>
</div>
)
}
}
export default ClassCounter
Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
at ClassCounter (http://localhost:3000/static/js/bundle.js:105:5)
at div
at App
uj5u.com熱心網友回復：
AttributeonClick期望執行一個函式，相反，您傳遞的是未定義的函式的輸出。不要呼叫里面的函式onClick，而是將其傳遞給在事件上執行。
這是您可以解決的方法
<button onClick={(e) => this.changeCount(this.state.count 1)}>
Increment
</button>
<button onClick={(e) => this.changeCount(this.state.count - 1)}>
Decrement
</button>
uj5u.com熱心網友回復：
將您的 onClick 函式更改為箭頭函式：
<button onClick={() => this.changeCount(this.state.count 1)}>Increment</button>
<button onClick={()=> this.changeCount(this.state.count -1)}>Decrement</button>
當您在 onClick 中執行函式時，它會嘗試更改狀態，這是在類的渲染之外創建箭頭函式并更改該函式中的狀態的更好方法：
handleIncreament=()=>{
this.changeCount(this.state.count 1)
}
并使用它：
<button onClick={handleIncreament}>Increment</button>
因為如果您在渲染中使用箭頭函式，react 將在每個渲染中創建一個新函式
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412526.html
標籤：