函数未返回正确的状态

Question

我正在尝试编写一个函数来从数组 COLORS 中获取随机颜色。但是，问题在于它不是只返回一种颜色，而是返回太多颜色，从而导致无限错误。导致 React 抛出 Too much re-renders 错误。我的代码有什么问题吗？

const COLORS = [
  "#FFAEBC",
  "#1ec891",
  "#ff725e",
  "#ffd05b",
  "#A0E7E5",
  "#5885AF",
];

const DisplaySubject = (props) => {

  const [randomColor, setRandomColor] = useState("");

  const generateRandomColor = (colors) => {
    let randColorIndex, randColor;
    for (let i = 0; i < colors.length; i++) {
      randColorIndex = Math.floor(Math.random() * colors.length);
      randColor = colors[randColorIndex];
      return randColor;
    }
    console.log(randColor);
    setRandomColor(randColor);
  };

  generateRandomColor(COLORS);

  console.log("random color state :", randomColor);
  return (
    <div>
      Let's get started
    </div>
  );
};

export default DisplaySubject;

Answer 1

首先，修复你的颜色生成器函数：

const generateRandomColor = (colors) => {
    const randColorIndex = Math.floor(Math.random() * colors.length);
    return colors[randColorIndex];
};

然后您可以将其用作 的初始值useState：

const DisplaySubject = (props) => {
    const [randomColor, setRandomColor] = useState(generateRandomColor(COLORS));
    return (
        <div style={{ backgroundColor: randomColor }}>
            Let's get started
        </div>
    );
};

问题是在函数setRandomColor内部调用getRandomColor，这导致了无限的渲染周期。