在 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中文网其他相关文章！