React中setState直接传值与回调传值的差异及问题咨询

核心差异 #

• 直接传值更新：setState(newValue)
  你传入的是调用setState瞬间的确定值，React会直接使用这个值更新状态。比如你原来的写法里，cards和topicRef.current.value都是调用addCard那一刻的实时值，会被立刻打包进新数组。

• 函数式更新：setState(prevState => newValue)
  你传入的是一个回调函数，这个函数不会立刻执行——它会等到React准备好处理状态更新时才触发。参数prevState是React提供的最新状态快照，能确保你拿到的是最准确的前序状态，避免异步更新导致的旧值问题。

你的问题原因 #

改成函数式写法后读不到ref值，是因为执行顺序的问题：

1. 你调用setCards(prevState => ...)，但这个回调不会立刻执行；
2. 你紧接着清空了topicRef和descRef的value；
3. 等React真正执行回调时，input的值已经是空的了，自然读不到内容。

而直接传值的写法是在调用setCards的瞬间就把ref的值取出来存进了新数组，后续清空input不影响已经获取到的值。

正确的函数式写法 #

要解决这个问题，只需要提前把ref的值存到变量里，再在回调中使用：

const addCard = () => {
  // 先把当前输入值存下来
  const currentTopic = topicRef.current.value;
  const currentDesc = descRef.current.value;
  
  setCards(prevState => [
    ...prevState,
    {
      topic: currentTopic,
      desc: currentDesc,
      id: nanoid(),
      done: false,
    },
  ]);

  topicRef.current.value = "";
  descRef.current.value = "";
};

什么时候用哪种写法 #

• 如果新状态不依赖之前的状态，两种写法都可行，但要注意函数式更新的异步特性；
• 如果新状态依赖之前的状态（比如count + 1），必须用函数式更新——因为React会批量处理异步更新，直接用当前的状态变量可能拿到旧值，导致更新出错。

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