React状态更新异常：首次点击不更新日期，后续点击延迟更新

问题描述 #

我在Udemy上学习React课程，完成一个测试状态知识的项目时遇到了Bug。项目包含count、step、date三个状态变量，要求count变化时date同步更新。其中：

• count取值范围：负无穷到正无穷
• step取值范围：1到正无穷
• date为Date对象

当前问题：
首次修改count变量时，date未更新；第二次修改时，date会更新，但基于上一次事件的count值变化。示例：

First Event
Count: 0->1
Date: 2 December 2023 -> 2 December 2023

Second Event
Count: 1->2
Date: 2 December 2023 -> 3 December 2023

Third Event
Count: 2->1
Date: 3 December 2023 -> 4 December 2023

问题代码 #

export default function App() {
    const [count, setCount] = useState(0);
    const [date,setDate]= useState(new Date(Date.now() + (count*86400*1000)).toDateString());
    const handlePrevCount = () => {
        setCount((prev) => prev - 1);
        setDate((prev) => new Date(Date.now() + (count*86400*1000)).toDateString())
 };
 const handleNextCount = () => {
     setCount((prev) => prev + 1);
     setDate((prev) => new Date(Date.now() + (count*86400*1000)).toDateString())
 };
 return (
     <div className="App">
         <div>
             <button onClick={handlePrevCount}>-</button>
             <button disabled>Count: {count}</button>
             <button onClick={handleNextCount}>+</button>
         </div>
         <span>{count === 0 && <p>Today is {date}</p>}</span>
         <span>{count >= 1 && <p>{count} days from now will be {date}</p>}</span>
         <span>{count < 0 && <p>{Math.abs(count)} days ago was {date}</p>}</span>
      </div>
  );
 }

问题原因 #

1. React状态更新异步性：调用setCount后，count不会立即更新，此时回调里的count还是旧值，导致setDate用旧值计算，出现延迟更新的情况。
2. 冗余状态维护：date完全可以通过count实时计算得出，没必要单独作为状态，既增加复杂度又容易出错。

解决方案 #

方案一：用计算属性（推荐） #

直接在渲染时根据当前count计算日期，count变化时自动同步更新：

export default function App() {
    const [count, setCount] = useState(0);
    // 实时计算日期，无需单独维护date状态
    const date = new Date(Date.now() + count * 86400 * 1000).toDateString();

    const handlePrevCount = () => {
        setCount(prev => prev - 1);
    };
    const handleNextCount = () => {
        setCount(prev => prev + 1);
    };

    return (
        <div className="App">
            <div>
                <button onClick={handlePrevCount}>-</button>
                <button disabled>Count: {count}</button>
                <button onClick={handleNextCount}>+</button>
            </div>
            {count === 0 && <p>Today is {date}</p>}
            {count >= 1 && <p>{count} days from now will be {date}</p>}
            {count < 0 && <p>{Math.abs(count)} days ago was {date}</p>}
        </div>
    );
}

方案二：保留date状态，监听count变化更新 #

如果必须维护date状态，用useEffect监听count变化，同步更新date：

import { useState, useEffect } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    const [date, setDate] = useState(new Date().toDateString());

    // 监听count变化，自动更新date
    useEffect(() => {
        setDate(new Date(Date.now() + count * 86400 * 1000).toDateString());
    }, [count]);

    const handlePrevCount = () => {
        setCount(prev => prev - 1);
    };
    const handleNextCount = () => {
        setCount(prev => prev + 1);
    };

    return (
        <div className="App">
            <div>
                <button onClick={handlePrevCount}>-</button>
                <button disabled>Count: {count}</button>
                <button onClick={handleNextCount}>+</button>
            </div>
            {count === 0 && <p>Today is {date}</p>}
            {count >= 1 && <p>{count} days from now will be {date}</p>}
            {count < 0 && <p>{Math.abs(count)} days ago was {date}</p>}
        </div>
    );
}

关键提示 #

React状态更新是异步批量处理的，同一个事件回调里调用setCount后，无法立即拿到新的count值。能通过现有状态计算得出的值，尽量不要单独作为状态维护，减少同步逻辑的出错概率。

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