為什么將此計為變異狀態？

Question

handleClick(event) {
let value = event.target.value;

this.setState({ question: (this.state.question += value) });

我收到警告：

不要直接改變狀態。 使用setState（）react / no-direct-mutation-state

如果我嘗試用此代碼加載頁面。
我該如何解決，以免出現警告？
它說使用this.setState ，但這就是我在做的。

Answer 1

您正在為this.state.question做不必要的分配 -您只需要在此處添加即可。 此外，當根據先前的值更新狀態時，文檔狀態為：

React可以將多個setState（）調用批處理到單個更新中以提高性能。 由於this.props和this.state可以異步更新，因此您不應依賴於它們的值來計算下一個狀態。

根據先前的值更新狀態的正確方法是傳入更新函數，該更新函數以先前的值為准，即：

this.setState(prevState => ({ question: prevState.question + value }));

Answer 2

錯誤在這里：

this.state.question += value

+ =是用於將右操作數添加到左操作數的運算符。 您正在嘗試為this.state.question添加值。

正確的方法是：

this.setState(previousState => ({ question: previousState.question + value }));

Answer 3

這被認為是變異狀態，因為您正在為this.state.question中的this.state.question分配一個值(this.state.question += value) 。 我已經粘貼了指向代碼沙箱的鏈接，您可以查看該代碼沙箱以查看如何正確實現此行為。