React中useState更新后向数组添加新值的正确实现方法

1. 直接使用固定值（适用于新value为已知常量的场景） #

既然你要设置的value是固定的3，直接把这个值加入数组，无需依赖state中的value：

const handleKeyDown = (event) => {
    setValue(3);
    setArray([...array, 3]);
};

2. 先存储新值再同步更新（适用于新value需计算但不依赖旧state的场景） #

如果新value是通过逻辑计算得出的，先把计算结果存为变量，再同步更新两个state：

const handleKeyDown = (event) => {
    const newValue = 3; // 可替换为你的实际计算逻辑
    setValue(newValue);
    setArray([...array, newValue]);
};

3. 函数式更新（适用于新value依赖旧state的场景） #

如果value的更新依赖它之前的状态（比如setValue(prev => prev + 1)），用函数式更新能确保数组拿到最新的value：

const handleKeyDown = (event) => {
    setValue(prevValue => {
        const newValue = prevValue + 3; // 示例：基于旧值计算新值
        setArray(prevArray => [...prevArray, newValue]);
        return newValue;
    });
};

4. useRef同步最新值（适用于跨渲染周期访问最新state的场景） #

如果需要在异步操作（如定时器）中访问value的最新值，用useRef同步存储state的最新状态：

import { useState, useRef, useEffect } from 'react';

const [value, setValue] = useState(0);
const [array, setArray] = useState([1, 2]);
const valueRef = useRef(value);

// 每次value更新时同步ref的值
useEffect(() => {
    valueRef.current = value;
}, [value]);

const handleKeyDown = (event) => {
    setValue(3);
    // 异步场景下使用ref获取最新值
    setTimeout(() => {
        setArray(prevArray => [...prevArray, valueRef.current]);
    }, 1000);
};

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