根據日期差異更改顏色-React-有解無憂

我試圖根據 2 個日期之間的天數顯示不同的顏色。我已經成功地讓兩個日期之間的差異生效，但我正在努力更新顏色，因為它不會立即更新，因為我的“差異”沒有更新。我應該以不同的方式這樣做嗎？我試過使用 useEffect 掛鉤來嘗試對它們進行排序，但它給了我錯誤。

import { useEffect, useState } from "react"
const ColourDisplay = ({ date }) => {
    const [colour, setColour] = useState("green")
    const [plantDate, setPlantDate] = useState(new Date(date))

    const [diff, setDiff] = useState(0)

    let colourPicker = () => {
        if (diff <= 0) {
            setColour('red')
        } else if (diff > 0 && diff <= 2) {
            setColour('orange')
        } else {
            setColour('green')
        }
    }

    let diffCalculator = () => {
        const today = new Date()
        const _MS_PER_DAY = 1000 * 60 * 60 * 24;
        const utc1 = Date.UTC(plantDate.getFullYear(), plantDate.getMonth(), plantDate.getDate());
        const utc2 = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());

        setDiff(Math.floor((utc1 - utc2) / _MS_PER_DAY))
        
    }
    useEffect(() => {
        setPlantDate(new Date(date))
        diffCalculator(colourPicker)
    }, [date])

    if (date) {
        return <div style={{ backgroundColor: `${colour}` }}>color</div>
    }
}
export default ColourDisplay

如果有人可以幫助我解決我在這里做錯的事情，那就太好了。謝謝大家。

uj5u.com熱心網友回復：

我更新了代碼

你用了幾個無用的狀態，一個狀態就足以顯示結果。

import { useEffect, useState } from "react";
import * as React from "react";

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

  let colourPicker = (diff) => {
    if (diff <= 0) {
      setColour("red");
    } else if (diff > 0 && diff <= 2) {
      setColour("orange");
    } else {
      setColour("green");
    }
  };

  let diffCalculator = (plantDate) => {
    const today = new Date();
    const _MS_PER_DAY = 1000 * 60 * 60 * 24;
    const utc1 = Date.UTC(
      plantDate.getFullYear(),
      plantDate.getMonth(),
      plantDate.getDate()
    );
    const utc2 = Date.UTC(
      today.getFullYear(),
      today.getMonth(),
      today.getDate()
    );
    colourPicker(Math.floor((utc1 - utc2) / _MS_PER_DAY));
  };
  useEffect(() => {
    diffCalculator(new Date(date));
  }, [date]);

  if (date) {
    return <div style={{ backgroundColor: `${colour}` }}>color</div>;
  }
};
export default ColourDisplay;

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533614.html

標籤：反应异步反应挂钩

上一篇：當處理程式在useEffect掛鉤之外時如何洗掉/清理EventListener？

下一篇：產品未顯示，顯示未定義的產品