React中根据日期差动态更新元素颜色的问题求助

你的代码核心问题出在React状态更新的异步特性，以及函数调用时机不对：

1. useEffect里先调用setPlantDate，紧接着就执行diffCalculator，但setPlantDate是异步的，此时plantDate还是旧值，导致计算的diff不准确。
2. diffCalculator里调用setDiff后直接调用colourPicker，但setDiff也是异步的，colourPicker拿到的还是更新前的diff值，自然无法正确设置颜色。
3. colourPicker依赖diff状态，完全可以直接用计算出来的diff值，没必要绕一圈走状态。

修复后的代码 #

import { useEffect, useState } from "react"

const ColourDisplay = ({ date }) => {
    const [colour, setColour] = useState("green")
    const [diff, setDiff] = useState(0)

    // 直接接收diff参数，不用依赖状态
    const colourPicker = (currentDiff) => {
        if (currentDiff <= 0) {
            setColour('red')
        } else if (currentDiff > 0 && currentDiff <= 2) {
            setColour('orange')
        } else {
            setColour('green')
        }
    }

    const calculateDiff = () => {
        if (!date) return;
        const today = new Date()
        const _MS_PER_DAY = 1000 * 60 * 60 * 24;
        const plantDate = new Date(date)
        const utc1 = Date.UTC(plantDate.getFullYear(), plantDate.getMonth(), plantDate.getDate());
        const utc2 = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
        const currentDiff = Math.floor((utc1 - utc2) / _MS_PER_DAY)
        
        setDiff(currentDiff)
        // 直接用计算出的diff值设置颜色
        colourPicker(currentDiff)
    }

    useEffect(() => {
        calculateDiff()
        // 可选：如果需要每天自动更新颜色，添加定时器
        const timer = setInterval(calculateDiff, 24 * 60 * 60 * 1000)
        return () => clearInterval(timer)
    }, [date])

    if (!date) {
        return null // 或者返回你需要的空状态组件
    }

    return <div style={{ backgroundColor: colour, padding: '10px' }}>color</div>
}
export default ColourDisplay

关键改动说明 #

• 移除plantDate状态，直接在计算时转换props的date，避免异步更新带来的旧值问题。
• colourPicker改为接收currentDiff参数，直接用计算结果设置颜色，跳过依赖diff状态的异步等待。
• useEffect里仅调用calculateDiff，一次完成diff计算、状态更新和颜色设置，逻辑更连贯。
• 增加可选定时器，确保跨天时颜色能自动更新。
• 修正空值判断，date为空时返回明确的空状态。

内容的提问来源于stack exchange，提问作者fluffy-lionz