时间戳

首页 > 解决方案 > React如何在变量更改时重新渲染地图功能？

javascript - React如何在变量更改时重新渲染地图功能？

问题描述

这是一段应该显示我的问题的摘录。在我的项目中，我对网格做了一些事情，现在我想重置它，但我不知道它是如何工作的，因为如果我更改网格变量，.map() 函数不会重新渲染。我希望你能理解我的问题，你可以帮助我。

那是我的代码：

  export default function App() {
  const getInitialGrid = () => {
    const grid = [];
    for (let row = 0; row < 20; row++) {
      const currentRow = [];
      for (let col = 0; col < 50; col++) {
        currentRow.push([]);
      }
      grid.push(currentRow);
    }
    return grid;
  };
  const grid = getInitialGrid();
  return (
    <div className="App">
      {grid.map(function (row, rowIdx) {
        return (
          <div className="grid-row" key={rowIdx}>
            {row.map(function (node, colIdx) {
              return <div className="node">hi</div>;
            })}
          </div>
        );
      })}
    </div>
  );
}

它与此处的代码相同。

非常感谢！

标签： javascriptreactjs

解决方案

您应该为此使用useState挂钩。

import React, { useState } from 'react';

export default function App() {
    // App code
    const [grid, setGrid] = useState(getInitialGrid());
    // more App code

然后，如果您想为网格分配一个新值并导致重新渲染，您可以这样做（在您的 App 组件中）：

setGrid(yourNewGrid);

推荐阅读