useState 返回一个包含状态值和更新函数的数组，必须通过数组解构（如 const [state, setState] = useState(...)）获取，直接赋值为单个变量会导致逻辑错误和运行时崩溃。
usestate 返回一个包含状态值和更新函数的数组，必须通过数组解构（如 `const [state, setstate] = usestate(...)`）获取，直接赋值为单个变量会导致逻辑错误和运行时崩溃。
在 React 函数组件中，useState 是最基础且高频使用的 Hook，其设计遵循“固定结构返回值”的约定：始终返回一个长度为 2 的数组，形式为 [currentState, setStateFunction]。理解并正确使用这一结构，是避免意外崩溃的关键。
✅ 正确用法：数组解构（推荐且标准）
const [name, setName] = useState(route.params.name);
这是官方推荐、语义清晰、符合 React 约定的写法：
- name 获取初始状态值（如 "Appleseed John"）；
- setName 是用于更新该状态的函数（如 setName("Jane Doe")）；
- 解构时变量名可自定义（不强制叫 name/setName），但命名应体现语义关联。
⚠️ 危险用法：部分解构或完全忽略解构
// ❌ 错误：只解构第一个元素 → setName 函数丢失，无法更新状态
const [name] = useState(route.params.name); // name = "Appleseed John" ✅，但无 setState！
// ❌ 严重错误：未解构，直接赋值给单变量 → name 指向整个数组！
const name = useState(route.params.name);
console.log(name);
// 输出：[ "Appleseed John", function dispatchSetState() { ... } ]此时 name 不是字符串，而是一个数组——访问 name.country_code 或 name.displayName 会报错（undefined 属性访问）；调用 name() 更会触发不可预知行为。你看到的控制台输出正是这个数组的完整形态：索引 0 是状态值，索引 1 是 dispatchSetState 函数。
? 如何临时调试？（不建议生产使用）
若因调试需要手动访问该数组：
const nameArray = useState(route.params.name);
console.log("当前状态值:", nameArray[0]); // ✅ 正确读取
console.log("更新函数:", nameArray[1]); // ✅ 可调用，但违背 Hook 设计意图
nameArray[1]("New Name"); // ✅ 等价于 setName("New Name")但请注意：这破坏了 React 的依赖追踪机制，且代码可读性极差，绝对不应出现在正式代码中。
? 关键注意事项
- 永远使用完整数组解构：const [state, setState] = useState(...) 是唯一安全、标准、可维护的方式；
- 不要重命名 setState 为 setXXX 以外的形式（如 updateName），否则会降低团队协作可读性；
- 确保 useState 调用在组件顶层（不能在条件、循环或嵌套函数内），否则违反 Hook 规则；
- 若需多个状态，应分别声明多个 useState，而非尝试用一个数组管理多个值（除非逻辑强耦合且明确需原子更新）。
掌握 useState 的返回结构本质，不仅能规避运行时崩溃，更是深入理解 React Hooks 设计哲学的重要一步。
