How to update an index inside an array with hooks without hitting "Error: Too many re-renders."

Question

我有一组单元格需要根据来自套接字服务器的一些用户输入进行更新。但是每当我尝试使用 useState() 更新索引时，反应都会抱怨“错误：太多 re-renders”。我尝试添加一个状态来指示网格已更改，但仍然会产生相同的错误。请帮助我：<

const GameUI = ({ height, width }) => {
  const [grid, setGrid] = React.useState([]);
  const [didUpdate, setDidUpdate] = React.useState(0);

  React.useEffect(() => {
    for (let index = 0; index < 64; index++) {
      const gridItem = <GridSquare key={`${index}`} color="" />;
      setGrid((oldArray) => [...oldArray, gridItem]);
    }
  }, []);

  //not re-rendering the modified component
  const handleChange = () => {
    let board = [...grid]
    board[1] = <GridSquare key={`[=10=]`} color="1" />;
    setGrid(board)
    // let count = didUpdate;
    // count += 1
    // setDidUpdate(count)
  };

  // handleChange();

  return (
    <div className="App">
      <GridBoard grid={grid} />
      <ScoreBoard />
      <Players />
      {handleChange()}
      {/* <MessagePopup /> */}
    </div>
  );
};

Answer 1

每次您更改 useState 挂钩提供的状态时，它 re-renders 您的组件。您在每个渲染器上调用 handleChange，这会调用您的 setGrid 状态挂钩。因此，您正在无限地渲染您的组件。

您什么时候真正需要调用 handleChange？每个动画帧？某种类型的每个动作事件？创建一个适当的 useEffect 或 useCallback 挂钩（包括使用的依赖项 [array] 作为第二个参数），将适当的事件应用于您的方法并相应地触发它。如果您使用 useEffect，请不要忘记 return 一个在组件最终卸载时禁用事件处理的函数，否则每次在同一应用程序中重新安装时都会触发重复事件。

How to update an index inside an array with hooks without hitting "Error: Too many re-renders."

How to update an index inside an array with hooks without hitting "Error: Too many re-renders."

javascript

reactjs

react-hooks

use-state