javascript - react 颜色变化一段时间后不起作用

Question

这是一个通过按下按钮使用react的颜色更改器(mutator)。但它面临的一个问题是，点击几下后，它就会停止工作。谁能帮忙解决这个问题吗？

import './App.css';
import React, {useState} from 'react';
import Button from './components/Button'



function App() {

  const [color, setColor] = useState("yellow")
  const colorPalette = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
  '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
  '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
  '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
  '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
  '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
  '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
  '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
  '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

  let randomNum = Math.floor(Math.random() * 50)

return (
    <div style = {{backgroundColor: color, height: 300}}>
      <button onClick = {() => setColor(colorPalette[randomNum])}>Click me to change color!</button>
    </div>
  );
}

export default App;

Answer 1

问题

它会一直工作，直到发生碰撞。当 randomNum 中的前一个值与新值相同时，就会发生冲突。这意味着存储在 color 状态中的新值将与其旧状态相同。当状态不变时，React不会重新渲染组件App。现在，由于随机数生成依赖于重新渲染的 App 组件，因此不会生成 randomNum 的新值。

有助于这样思考:这里的组件是一个函数，每次(重新)渲染都相当于调用该函数。现在，如果不调用该函数，randomNum 将不会获得分配给它的新值。这反过来不会触发重新渲染。

解决方案

每次点击时生成一个新的随机值。创建一个函数来执行此操作并在每次单击按钮时调用它。完整工作演示here 。下面是感兴趣的代码。

const genRandomNum = () => Math.floor(Math.random() * 50)

return (
...
<button onClick={() => setColor(colorPalette[genRandomNum()])}>
  Click me to change color!
</button>
...)