使用 React，想要修复 useEffect 有一个缺少依赖错误

Question

由于某种原因，我似乎无法理解此错误; 我已经研究了它，回调，包括useEffect中的代码，但它对我不起作用(或者我做错了(。

这是代码：

import React, { useEffect, useState } from "react";
import "../css/main.css";
import Node from "./node";
const Pathfinder = () => {
const START_NODE_ROW = 10;
const START_NODE_COL = 15;
const FINISH_NODE_ROW = 10;
const FINISH_NODE_COL = 35;
useEffect(() => {
getGrid();
}, []);
const [grid, setGrid] = useState([]);
const getGrid = () => {
setGrid(getInitGrid());
};
const getInitGrid = () => {
const grid = [];
for (let row = 0; row < 20; row++) {
const currentRow = [];
for (let col = 0; col < 50; col++) {
currentRow.push(createNode(col, row));
}
grid.push(currentRow);
}
return grid;
};
const createNode = (col, row) => {
return {
col,
row,
isStart: row === START_NODE_ROW && col === START_NODE_COL,
isFinish: row === FINISH_NODE_ROW && col === FINISH_NODE_COL,
distance: Infinity,
isVisited: false,
isWall: false,
previousNode: null
};
};
return (
<main id="Pathfinder">
{grid.map((row, rowIdx) => {
return (
<div key={rowIdx}>
{row.map((node, nodeIdx) => {
const { row, col, isFinish, isStart } = node;
return (
<Node
key={nodeIdx}
col={col}
isFinish={isFinish}
isStart={isStart}
row={row}
></Node>
);
})}
</div>
);
})}
</main>
);
};
export default Pathfinder;

我基本上是在制作节点组件的网格; 我必须使用useEffect，因为我试图仅使用箭头函数和钩子，而没有类/反应组件，这就是为什么我不能使用类似componentWillMount的东西。

Answer 1

您需要传递使用的对象，在这种情况下，getGrid函数useEffect钩子以删除警告消息。

就像下面这样：

useEffect(() => {
getGrid();
}, [getGrid]);

T.J. Crowder关于使用useCallback进行getGrid的补充建议。您可以按如下方式执行此操作：

const getGrid = useCallback(() => {
setGrid(getInitGrid());
}, [getInitGrid]);

在这里进一步阅读：

1. useEffect钩
2. useCallback钩

您需要对代码中的getInitGrid执行相同的操作。

我希望这有帮助！

Answer 2

正如 TJ 所提到的，将函数getInitGrid和createNode移动到组件之外是最好的举措。 按照您现在的方式，函数将在每次渲染时重新定义，这不是必需的，因为它们不直接绑定到组件状态。

此外，useState钩可以使用惰性初始状态，这意味着您可以为初始状态参数传递函数，并且根本不需要 useEffect 钩子。

这是我最终得到的：

import React, { useState } from "react";
import "../css/main.css";
import Node from "./node";
const START_NODE_ROW = 10;
const START_NODE_COL = 15;
const FINISH_NODE_ROW = 10;
const FINISH_NODE_COL = 35;
const createNode = (col, row) => {
return {
col,
row,
isStart: row === START_NODE_ROW && col === START_NODE_COL,
isFinish: row === FINISH_NODE_ROW && col === FINISH_NODE_COL,
distance: Infinity,
isVisited: false,
isWall: false,
previousNode: null
};
};
const getInitGrid = () => {
const grid = [];
for (let row = 0; row < 20; row++) {
const currentRow = [];
for (let col = 0; col < 50; col++) {
currentRow.push(createNode(col, row));
}
grid.push(currentRow);
}
return grid;
};
const Pathfinder = () => {
const [grid, setGrid] = useState(getInitGrid);
return (
<main id="Pathfinder">
{grid.map((row, rowIdx) => {
return (
<div key={rowIdx}>
{row.map((node, nodeIdx) => {
const { row, col, isFinish, isStart } = node;
return (
<Node
key={nodeIdx}
col={col}
isFinish={isFinish}
isStart={isStart}
row={row}
></Node>
);
})}
</div>
);
})}
</main>
);
};
export default Pathfinder;

Answer 3

Pathfinder中的大多数内容都是静态的，应该移到它之外的模块中;这也会产生处理你遇到的useEffect问题的效果。所有START_NODE_ROW等常量、getInitGrid和createNode都是静态的，无需每次都重新创建它们。我还会getGrid包装在useCallback中，并且可能会稍微重新排序，以便仅在定义后使用它们，但这主要是针对人类读者，而不是编译器/JavaScript 引擎：

import React, { useEffect, useState } from "react";
import "../css/main.css";
import Node from "./node";
const START_NODE_ROW = 10;
const START_NODE_COL = 15;
const FINISH_NODE_ROW = 10;
const FINISH_NODE_COL = 35;
const getInitGrid = () => {
const grid = [];
for (let row = 0; row < 20; row++) {
const currentRow = [];
for (let col = 0; col < 50; col++) {
currentRow.push(createNode(col, row));
}
grid.push(currentRow);
}
return grid;
};
const createNode = (col, row) => {
return {
col,
row,
isStart: row === START_NODE_ROW && col === START_NODE_COL,
isFinish: row === FINISH_NODE_ROW && col === FINISH_NODE_COL,
distance: Infinity,
isVisited: false,
isWall: false,
previousNode: null
};
};
const Pathfinder = () => {
const [grid, setGrid] = useState([]);
const getGrid = useCallback(() => {
setGrid(getInitGrid());
}, []);
useEffect(() => {
getGrid();
}, []);
return (
<main id="Pathfinder">
{grid.map((row, rowIdx) => {
return (
<div key={rowIdx}>
{row.map((node, nodeIdx) => {
const { row, col, isFinish, isStart } = node;
return (
<Node
key={nodeIdx}
col={col}
isFinish={isFinish}
isStart={isStart}
row={row}
></Node>
);
})}
</div>
);
})}
</main>
);
};
export default Pathfinder;

另外，getGrid很小，只使用一次。对我来说，不值得将其分解为自己的功能：

import React, { useEffect, useState } from "react";
import "../css/main.css";
import Node from "./node";
const START_NODE_ROW = 10;
const START_NODE_COL = 15;
const FINISH_NODE_ROW = 10;
const FINISH_NODE_COL = 35;
const getInitGrid = () => {
const grid = [];
for (let row = 0; row < 20; row++) {
const currentRow = [];
for (let col = 0; col < 50; col++) {
currentRow.push(createNode(col, row));
}
grid.push(currentRow);
}
return grid;
};
const createNode = (col, row) => {
return {
col,
row,
isStart: row === START_NODE_ROW && col === START_NODE_COL,
isFinish: row === FINISH_NODE_ROW && col === FINISH_NODE_COL,
distance: Infinity,
isVisited: false,
isWall: false,
previousNode: null
};
};
const Pathfinder = () => {
const [grid, setGrid] = useState([]);
useEffect(() => {
setGrid(getInitGrid());
}, []);
return (
<main id="Pathfinder">
{grid.map((row, rowIdx) => {
return (
<div key={rowIdx}>
{row.map((node, nodeIdx) => {
const { row, col, isFinish, isStart } = node;
return (
<Node
key={nodeIdx}
col={col}
isFinish={isFinish}
isStart={isStart}
row={row}
></Node>
);
})}
</div>
);
})}
</main>
);
};
export default Pathfinder;

(您不必将setGrid或getInitGrid声明为依赖项，因为第一个是来自 React 的状态设置器函数，它保证是稳定的，第二个是在Pathfinder之外定义的。