如何在反应更新后立即再次更新组件

Question

所以我试图让一个条变成绿色，然后再回到它原来的黑色，但它似乎需要后面的行作为它更新的内容。

const [color, setColor] = useState("black")
const bubbleSort = async () => {
    const sleep = ms => new Promise(res => setTimeout(res, ms));
      let len = arr.length;
      for (let i = 0; i < len; i++) {
          for (let j = 0; j < len; j++) {
              setCurrentIndex(j)
              console.log(j)
              console.log(currentIndex)
              if (arr[j] > arr[j + 1]) {
                  setColor("green")
                  console.log(color)
                  document.getElementById(`bar${j + 1}`).style.backgroundColor = color
                  let tmp = arr[j];
                  arr[j] = arr[j + 1];
                  arr[j + 1] = tmp;
                  setArr([...arr])
              }
              setColor("black")

              await sleep(200)
          }
          
      }

Answer 1

这似乎可以通过 useEffect 挂钩轻松完成。

这样的……

const FooComponent = () => {
  const [color, setColor] = useState("black")

  useEffect(()=> {
    if(color === "green") {
      setTimeout(function(){ 
        setColor("black");
    }, 3000); 
    }   
  }, [color, setColor])

  return <div onClick={() => setColor("green")}> HI </div>

}

所以 useEffect 就是这样工作的。每次颜色变化时，它都会运行该函数。

在我们的示例中，当您单击 div 时，颜色将设置为绿色，它会运行 useEffect 挂钩，等待 3 秒，然后将颜色设置回黑色，