React中useState字符串变量无法实时正确更新的原因及解决办法

核心问题 #

你定义的set是组件函数内部的普通变量，每次组件因state更新重新渲染时，这个变量都会被重新初始化为空Set，导致之前的选中状态全部丢失，最终只能显示最新操作的单个值。控制台打印正常是因为当前函数调用栈里的Set还未被销毁，但组件重新渲染后新的Set是空的，所以页面显示异常。

修正方案（两种可选） #

方案1：用Set维护选中状态（推荐，增删效率更高）

将Set存入React状态中，确保组件重新渲染时状态不会丢失，同时遵循React不可变状态的原则，修改时创建Set副本：

function MyApp() {
    // 用state维护选中的颜色集合，初始为空Set
    const [selectedColors, setSelectedColors] = useState(new Set());
    // 转换为逗号分隔的字符串用于展示
    const displayText = [...selectedColors].join(', ');
    
    const handleCheck = event => {
        const { value, checked } = event.target;
        // 创建当前Set的副本，避免直接修改原state
        const updatedSet = new Set(selectedColors);
        
        checked ? updatedSet.add(value) : updatedSet.delete(value);
        // 更新状态
        setSelectedColors(updatedSet);
    }
    
    return (
        <div>
            <input type="checkbox" id="red" name="color" value="Red" onChange={handleCheck}/>
            <label htmlFor="red">Red</label> <br />

            <input type="checkbox" id="blue" name="color" value="Blue" onChange={handleCheck}/>
            <label htmlFor="blue">Blue</label> <br />
    
            <input type="checkbox" id="green" name="color" value="Green" onChange={handleCheck}/>
            <label htmlFor="green">Green</label> <br />
    
            <input type="checkbox" id="yellow" name="color" value="Yellow" onChange={handleCheck}/>
            <label htmlFor="yellow">Yellow</label> <br />
    
            <p>Checked color(s): {displayText}</p>
        </div>
    );
}

方案2：用数组维护选中状态（更直观，适合新手）

用数组存储选中的颜色，通过添加/过滤操作更新状态：

function MyApp() {
    // 用数组维护选中的颜色，初始为空数组
    const [selectedColors, setSelectedColors] = useState([]);
    const displayText = selectedColors.join(', ');
    
    const handleCheck = event => {
        const { value, checked } = event.target;
        if (checked) {
            // 添加新颜色，创建数组副本
            setSelectedColors(prev => [...prev, value]);
        } else {
            // 移除对应颜色，过滤出不等于当前值的项
            setSelectedColors(prev => prev.filter(color => color !== value));
        }
    }
    
    return (
        <div>
            <input type="checkbox" id="red" name="color" value="Red" onChange={handleCheck}/>
            <label htmlFor="red">Red</label> <br />

            <input type="checkbox" id="blue" name="color" value="Blue" onChange={handleCheck}/>
            <label htmlFor="blue">Blue</label> <br />
    
            <input type="checkbox" id="green" name="color" value="Green" onChange={handleCheck}/>
            <label htmlFor="green">Green</label> <br />
    
            <input type="checkbox" id="yellow" name="color" value="Yellow" onChange={handleCheck}/>
            <label htmlFor="yellow">Yellow</label> <br />
    
            <p>Checked color(s): {displayText}</p>
        </div>
    );
}

额外修正点 #

原代码中所有label的htmlFor属性都写为color，这会导致点击label无法正确触发对应复选框，已修正为对应复选框的id（如red对应htmlFor="red"）。

内容的提问来源于stack exchange，提问作者Geones