Javascript 反应：按id更新元素的数据变量

由于性能问题，为了更快地运行，我希望逐个刷新网格的单元格。我已成功地通过以下方式更改了这些电池的设计：

document.getElementById(`cell-${cell.row}-${cell.col}`).className =
      "cell cell-isPlaced";

每个单元格都有一个数据变量

props.data.num

，我希望在更改其设计时以相同的方式刷新该变量。出于某些原因，以下代码不会刷新网格上的数字（为了便于理解，每个单元格的值都是0，我想将其更改为1）：

单元格：

const单元格=（道具）=>{
让单元格=（）=>{
返回(
{props.data.num}
);
};
返回单元（）；
};
导出默认单元格；

元素的数据可以像我尝试的那样进行更改吗？（通常，所有单元格都显示0 num，这没有问题）

网格渲染：

let grid = this.state.grid.map((row, index) => {
      return (
        <div key={index} className="row">
          {row.map((cell, cellIndex) => {
            return (
              <Cell
                key={cellIndex}
                data={cell}
              />
            );
           })}
       </div>
      );
    });

let grid=this.state.grid.map（（行，索引）=>{
返回(
{row.map（（单元格，单元格索引）=>{
返回(
);
})}
);
});

初始化期间单元格中的数据：

 function createGrid(props) {
  let grid = [];
  for (let i = 0; i < props.rows; i++) {
    grid.push([]);
    for (let j = 0; j < props.columns; j++) {
      grid[i].push({
        row: i,
        col: j,
        num: 0,
      });
    }
  }
  return grid;
}

函数createGrid（道具）{
让网格=[]；
for（设i=0；i

基本上，您的组件不会刷新，因为React不知道它应该重新加载：

每次组件状态更改时，React都会安排渲染

及

因此，仅当父组件的状态已使用其中一个函数更改时，子组件才会更新

由于不通过

setState

函数或其等效函数更改组件的状态，因此不会触发重新渲染。您可以阅读有关此主题的更多信息

为了解决这个问题，我想你有两个选择。将num props的更新转换为setState函数，或者尝试暴力方式，对类组件执行

this.forceUpdate（）

，或对功能组件执行类似操作：

const [update, setUpdate] = useState(0);
const refresh = () => setUpdate(update + 1);

---

props.data的价值是什么？你能给出一个例子吗？@vikashvik当然，我已经更新了这个问题，希望现在能提供所有需要的信息。看来我得另找办法了。谢谢你的回答！

 function createGrid(props) {
  let grid = [];
  for (let i = 0; i < props.rows; i++) {
    grid.push([]);
    for (let j = 0; j < props.columns; j++) {
      grid[i].push({
        row: i,
        col: j,
        num: 0,
      });
    }
  }
  return grid;
}

const [update, setUpdate] = useState(0);
const refresh = () => setUpdate(update + 1);