在 React useState() 中處理物件值

React 中的 useState 是什麼？

useState 是一個 React hook，允許功能元件管理和更新本機狀態。

但你必須確保透過 useState() 更新狀態，而不是直接改變狀態本身。

useState 的基本範例

const [count, setCount] = useState(0);

setCount(count++)
console.log(count) // 1

useState 中物件狀態的問題

Javascript 有兩個可以儲存資料的地方：堆疊和堆，它與原始值和引用的故事有關。

原始值和引用

堆疊在Javascript中用於儲存靜態數據，例如原始值（字串、數字、布林值、未定義和null），其中資料的大小是固定的，而
堆用於儲存動態數據，例如引用（物件和函數）。

原始值的值只是儲存在堆疊中，而引用本身的內容則儲存在從堆疊引用的堆疊中。

這會導致引用現有物件的新分配值被解釋為相同的情況。

讓我們來看一個錯誤的例子？ :

const [state, setState] = useState([1,2]);

const temp = state
temp.push(3)
useState(temp)

因為 temp 和 state 都引用堆中的相同值，所以它們實際上是相同的。這違反了 useState 的規則，它需要一個新的物件或值來觸發重新渲染。 ？

怎麼解決呢？

⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️

傳播文法

[...[]]

幫助您建立堆中值的單獨副本。

const a = [1,2]
const b = a
console.log(Object.is(a,b)) // true

const c = [...a]
console.log(Object.is(a,c)) // false

瞧？

const [state, setState] = useState([1,2])
const temp = [...state].push(3)
setData(temp);

現在，值 temp 與原始物件不同，確保它不再與 state 共用相同的參考。

就地函數的另一個陷阱

諸如 sort() 之類的就地函數會就地修改數據，而無需創建數據結構的單獨副本。

a = [1,3]
a.sort((b,c) => c-b)
console.log(a) // => [3,1]

如您所見，a 中的值已變更。

這裡又是一個不正確的例子？ ：

const [state, setState] = useState([])

const sortOrder = () => {
    state.sort((a, b) => a-b)
    setState(state);
  }

狀態的改變違反了規則。 ？

所以這是使用擴充語法的解決方案。

const [state setState] = useState([])

const sortOrder = () => {
   const newState = [...data].sort((a, b) => a-b)
    setState(newState);
  }

但是等等，在使用擴展語法得出結論之前，請記住查找文件以了解最新更新。

檢查一個文件

功能有機會更新。

例如，2023 年新推出的 toSorted() 傳回輸入資料的複製版本？

const [state, newState] = useState([])

const sortOrder = () => {
   const newState = state.toSorted((a, b) => a-b)
   newState(newState);
  }

人工智慧不擅長捕捉最新訊息，所以這種傳統方法仍然值得！

結論

讓我們使用擴充語法 [...[]]
但也要記得查閱文件。

參考

https://felixgerschau.com/javascript-memory-management/
https://react.dev/reference/react/useState

以上是在 React useState() 中處理物件值的詳細內容。更多資訊請關注PHP中文網其他相關文章！