useState 返回一个包含状态值和更新函数的数组，必须通过数组解构（如 const [state, setState] = useState(...)）来正确获取二者；直接赋值为单一变量会得到整个数组，导致访问错误。
usestate 返回一个包含状态值和更新函数的数组，必须通过数组解构（如 `const [state, setstate] = usestate(...)`）来正确获取二者；直接赋值为单一变量会得到整个数组，导致访问错误。
在 React 函数组件中，useState 是最基础且高频使用的 Hook。它返回一个双元素数组：第一个元素是当前状态值，第二个元素是用于更新该状态的函数（通常命名为 setState）。理解其返回结构并正确解构，是避免运行时错误的关键。
✅ 正确用法：数组解构（推荐）
const [name, setName] = useState(route.params.name);
这是标准且语义清晰的写法：
- name → 当前状态值（字符串、对象等，取决于初始化值）
- setName → 更新 name 的函数，调用 setName("New Name") 会触发重新渲染
此写法符合 React 官方约定，可读性强，也便于后续扩展（例如添加多个状态）。
⚠️ 危险但“看似可行”的写法：不完全解构
const [name] = useState(route.params.name); // ❌ 缺少 setState！
虽然代码能运行（name 确实拿到了初始值），但你丢失了状态更新能力——setName 函数未被声明，后续无法调用它修改状态，违背了 useState 的设计目的。这属于逻辑缺陷，而非语法错误。
❌ 错误用法：直接赋值为单变量
const name = useState(route.params.name); // ❌ name 是整个数组！
console.log(name);
// 输出示例：[{...contactObject...}, ƒ dispatchSetState]此时 name 并非状态值，而是 [currentState, setStateFunction] 这个数组本身。因此：
- name[0] 才是你要的状态（如联系人对象）
- name[1] 才是 setState 函数（如 name[1]("John Doe")）
但这种写法严重违反命名直觉（name 应代表值，而非数组），极易引发维护性问题和 Bug，绝对禁止在生产代码中使用。
? 验证与调试建议
可在开发阶段添加类型提示或简单校验：
const nameState = useState(route.params.name);
console.log('useState return:', nameState); // 明确看到数组结构
console.assert(Array.isArray(nameState) && nameState.length === 2,
'useState must return [value, setter]');✅ 最佳实践总结
- 始终使用完整数组解构：const [state, setState] = useState(initialValue)
- 变量命名需语义化（如 isLoading, setLoading；user, setUser）
- 避免省略解构项（除非明确不需要更新函数，但极少见）
- 不要将 useState() 直接赋给单变量——它不是“状态值”，而是一个状态元组
掌握这一基础机制，不仅能规避 Cannot read property 'xxx' of undefined 类型错误，更是深入理解 React Hooks 设计哲学的第一步。
