感覺有點笨，我使用 React 已經 2 年了，一直認為你必須使用setState物件的新副本來避免改變狀態。但是，此示例更改了狀態并setState與相同的物件參考一起使用，沒有任何問題。
為什么這行得通？這仍然是最佳做法嗎？
您可以通過單擊 JavaScript 窗格上代碼筆中的齒輪圖示來更新上述兩個鏈接的版本號。
請注意，以下代碼段使用16.7.0-alpha.2并遇到您遇到的相同問題：
顯示代碼片段
const { useState } = React;
const Counter = () => {
const [countObject, setCountObject] = useState({count: 0});
const onClick = () => {
countObject.count = countObject.count 1;
setCountObject(countObject);
}
return (
<div>
<p>You clicked {countObject.count} times</p>
<button onClick={onClick}>
Click me
</button>
</div>
)
}
ReactDOM.render(<Counter />, document.getElementById('app'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"></script>
<div id="app"></div>但是，將您的版本更改為16.8或更高版本可以解決此問題（在撰寫本文時，我們已更新至 v17.0.2）：
顯示代碼片段
const { useState } = React;
const Counter = () => {
const [countObject, setCountObject] = useState({count: 0});
const onClick = () => {
countObject.count = countObject.count 1;
setCountObject(countObject);
}
return (
<div>
<p>You clicked {countObject.count} times</p>
<button onClick={onClick}>
Click me
</button>
</div>
)
}
ReactDOM.render(<Counter />, document.getElementById('app'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>uj5u.com熱心網友回復：
不變性當然非常重要，您的代碼可以作業，只是因為修改原始物件不會影響功能。通過共享初始值更改代碼，然后單擊任意按鈕，您會發現有問題。
const { useState } = React;
const Counter = () => {
const value = { count: 0 }
const [countObject, setCountObject] = useState(value);
const [countObject2, setCountObject2] = useState(value);
const onClick = () => {
countObject.count = countObject.count 1;
setCountObject(countObject);
}
const onClick2 = () => {
countObject2.count = countObject2.count 1;
setCountObject(countObject2);
}
return (
<div>
<p>You clicked {countObject.count} times</p>
<button onClick={onClick}>
Click me
</button>
<p>You2 clicked {countObject2.count} times</p>
<button onClick={onClick2}>
Click me2
</button>
</div>
)
}
ReactDOM.render(<div><Counter /></div>, document.getElementById('app'))
uj5u.com熱心網友回復：
正如 Nick Parsons 所提到的，這是 Code Pen 中使用的 React 版本的問題。這是更新了 React 版本的同一支筆，它不起作用（因為它不應該）：
https://codepen.io/gfels/pen/QWqZxLP?editors=1111
重新發布 onClick 函式，因為 StackOverflow 需要使用 Code Pen 的代碼
const onClick = () => {
countObject.count = countObject.count 1;
setCountObject(countObject); // mutated object, same reference
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/408301.html
標籤：