React Hooks - 如何确保 setState 不在调用堆栈中最后调用？

如何解决React Hooks - 如何确保 setState 不在调用堆栈中最后调用？

背景

我正在尝试编写一个函数，该函数在页面首次加载时生成 100 个带有随机颜色和数字标签的框。

我试图通过运行 100 个循环来创建唯一的 boxObjects 来实现这一点，然后将这些对象推送到包含在“box”状态中的一组对象。

然后我只想在页面上随机显示其中的五个 boxObject。每次点击一个框时，它都会将它的 'clicked' 属性更新为 'true' 并生成一组新的五个对象来显示。

挑战

似乎在运行 Generate Boxes 循环时，'setBox' 在调用堆栈中最后被调用。这意味着当尝试随机选择其中五个进行显示时，“框”状态（对象数组）为空。这会导致错误。只有在调用堆栈被清除后，'box' 状态才会更新。

在尝试随机选择其中五个进行显示之前，我需要做什么才能确保更新“框”状态。换句话说，我可以在调用堆栈清空之前调用 setState 吗？

代码如下：

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

function Box() {
  const [box,setBox] = useState([]);
  const [displayedBox,setDisplayedBox] = useState([]);

  //Generate Boxes
  useEffect(() => {
    console.log("useeffect1 start");
    for (let i = 1; i < 101; i++) {
      const randColor =
        "hsl(" +
        360 * Math.random() +
        "," +
        (25 + 70 * Math.random()) +
        "%," +
        (85 + 10 * Math.random()) +
        "%)";
      let boxObject = {
        id: i,color: randColor,clicked: false,};
      setBox((oldBox) => [...oldBox,boxObject]);
      console.log("end" + i);
      console.log(box);
    }
    console.log("end of useeffect1");
    console.log(box);
  },[]);

  console.log("Between useEffects");
  console.log(box);

  //Randomly Display Boxes
  useEffect(() => {
    console.log("useeffect2 start");
    console.log(box);
    const box1 = box[Math.random() * 101];
    const box2 = box[Math.random() * 101];
    const box3 = box[Math.random() * 101];
    const box4 = box[Math.random() * 101];
    const box5 = box[Math.random() * 101];

    setDisplayedBox([box1,box2,box3,box4,box5]);
  });

  let handleClick = (e) => {
    const index = e.target.id - 1;
    let newArr = [...box];
    newArr[index].clicked = true;
    setBox(newArr);
  };

  return (
    <div>
      {displayedBox.map((displayedBox,index) => {
        return (
          <div
            key={index}
            id={displayedBox.id}
            style={{
              backgroundColor: `${displayedBox.color}`,border: "1px solid black",width: "15px",height: "15px",}}
            onClick={handleClick}
          >
            {displayedBox.id}
          </div>
        );
      })}
    </div>
  );
}

export default Box;

这是生成的console.log：

https://i.stack.imgur.com/fFW64.png