ReactJS中点击2D网格指定单元格修改对应倍数单元格背景色问题排查

• 状态更新异步：setFillcolor是React的异步状态更新方法，调用后不会立刻修改当前作用域内的fillcolor变量，后续循环中拿到的还是更新前的空值，背景色设置不会生效。
• 临时数组修改不生效：你在组件内定义的items是每次组件渲染时生成的临时数组，在changeColor中直接修改数组元素不会触发组件重渲染，且下次渲染时会重新生成初始items，修改内容会被完全覆盖。
• 状态设计不合理：仅存储填充颜色，没有存储判断高亮的核心条件，无法在渲染时动态匹配需要变色的单元格。

调整状态设计，存储当前点击的单元格编号，每次渲染时动态判断每个单元格是否为该编号的倍数，再设置对应背景色即可：

const { useState } = React;

function App() {
  // 存储当前点击的编号，初始为null代表无选中
  const [selectedNum, setSelectedNum] = useState(null);

  const handleCellClick = (num) => {
    setSelectedNum(num);
  };

  // 每次渲染动态生成单元格
  const cells = [];
  for (let i = 1; i <= 100; i++) {
    const isMultiple = selectedNum !== null && i % selectedNum === 0;
    cells.push(
      <div
        key={i}
        onClick={() => handleCellClick(i)}
        className="border border-gray-600 text-center p-2"
        style={{ backgroundColor: isMultiple ? "yellow" : "transparent" }}
      >
        {i}
      </div>
    );
  }

  return (
    <div className="App">
      <div className="container">
        <div className="grid grid-cols-10 grid-rows-10 gap-0">
          {cells}
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

内容的提问来源于stack exchange，提问作者Suyash