useState如何更新

在 React 中，useState 是用于在函数组件中添加状态管理的 Hook。更新状态需要使用它返回的 setter 函数，而不是直接修改状态变量。以下是详细说明和示例：

---

基本用法：

import React, { useState } from 'react';

function Counter() {
    // 声明状态变量 count 和更新函数 setCount
    const [count, setCount] = useState(0);

    // 正确更新方式：调用 setCount
    const increment = () => {
        setCount(count + 1); // ✅ 直接传递新值
    };

    // 函数式更新（推荐依赖旧值时）
    const incrementSafely = () => {
        setCount((prevCount) => prevCount + 1); // ✅ 使用函数确保最新值
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>+1（直接更新）</button>
            <button onClick={incrementSafely}>+1（函数式更新）</button>
        </div>
    );
}

---

关键规则：

1. 永远不要直接修改状态

   // ❌ 错误！不会触发重新渲染
   count = 10;

2. 更新对象/数组时需创建新引用

   const [user, setUser] = useState({ name: 'Alice', age: 30 });
   
   // ✅ 正确：展开原对象创建新对象
   setUser({ ...user, age: 31 });
   
   // ✅ 数组更新：使用 map/filter/concat 等
   const [list, setList] = useState(['a', 'b']);
   setList([...list, 'c']); // 添加新元素

3. 异步更新注意
   setCount 是异步的，调用后状态不会立即改变：

   console.log(count); // 更新前的旧值
   setCount(42);
   console.log(count); // 仍是旧值！（不是 42）

---

为什么推荐函数式更新？

当新状态依赖旧值时（尤其是多次连续更新），使用 函数形式 可避免闭包问题：

// ❌ 连续调用可能不会累加（count 始终是快照值）
const badIncrement = () => {
    setCount(count + 1);
    setCount(count + 1); // 实际只增加一次
};

// ✅ 函数式更新确保基于最新状态
const goodIncrement = () => {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1); // 正确增加两次
};

---

完整对象更新示例：

function UserForm() {
    const [form, setForm] = useState({
        name: '',
        email: ''
    });

    const handleChange = (e) => {
        // ✅ 合并更新对象
        setForm({
            ...form, // 复制旧字段
            [e.target.name]: e.target.value // 覆盖修改的字段
        });
    };

    return (
        <form>
            <input name="name" value={form.name} onChange={handleChange} />
            <input name="email" value={form.email} onChange={handleChange} />
        </form>
    );
}

---

总结：

场景	正确做法
更新基本类型（数字/字符串）	setValue(newValue) 或 setValue(prev => newValue)
更新对象	setObj({ ...obj, key: newValue })
更新数组	setArr([...arr, newItem]) 或 setArr(arr.filter(...))
连续多次更新依赖旧值	必须 用函数式 setValue(prev => prev + 1)

遵循这些规则可确保状态更新触发组件重新渲染，并避免常见的 React 状态管理错误。