使用 useEffect 根據 state 值更改 div 的顏色？ 反應

Question

我有一個 div，里面有一個計數器。

return (
    <div 
      className="loading-div"
      style={styles}
    >
      <h1>Loading {count} %</h1>
    </div>
  );

計數器使用 setTimeout function 更新，每 1 秒更新一次。 此 setTimeout function 設置在 useEffect 掛鈎內。

useEffect((e) => {
    setTimeout(() => {
      count === 100 ? e.preventDefault() : setCount(() => count + 1);
      count === 35 ? setFont(() => font + 6) : setCount(() => count + 1);
      count === 70 ? setWidth(() => width + 100) : setCount(() => count + 1);
      count === 70 ? setHeight(() => height + 100) : setCount(() => count + 1);
      count === 99 ? setColor(() => color="lime") : setCount(() => count + 1);
    }, 100);
  })

一切似乎都正常工作，直到counter達到 99，然后 div 消失。

我假設 fontSize 和寬度/高度有效，因為我使用font + 5但setColor function 不起作用，因為我分配了顏色但 state 不會立即改變？ 我怎樣才能使 state 在我的計數器達到 99 時立即改變？

Answer 1

為了回答我自己的問題，我發現將setColor放在另一個 function 中，然后調用 function 可以解決我的問題。

const getColor = () => setColor();

count === 99? getColor(() => setColor(() => color="lime")): setCount(() => count + 1);