useEffect 在此渲染期间收到了最后一个参数

Question

我收到此警告：

警告：useEffect 在此渲染期间收到最后一个参数，但在上一次渲染期间未收到。即使最后一个参数是可选的，其类型也不能在呈现之间更改。

警告截图在这里

//importing ...
const Relevance = () => {
const { data, setData } = useContext(defaultData);
if (data.length > 0) {
const Relevance = data.map((d) => {
return d.relevance;
});
const maxValue = Math.max(...Relevance);
let HashRelevance = new Array(maxValue + 1).fill(0);
for (let i = 0; i < Relevance.length; i++) {
if (Relevance[i] !== null) {
HashRelevance[Relevance[i]]++;
}
}
var keyRelevance = [];
var valueRelevance = [];
for (let i = 0; i < HashRelevance.length; i++) {
if (HashRelevance[i] !== 0) {
keyRelevance.push(i);
valueRelevance.push(HashRelevance[i]);
}
}
}
const [keyRelevanceState, setKeyIntenstityState] = useState([]);
const [valueRelevanceState, setValueIntenstityState] = useState([]);
useEffect(() => {
setKeyIntenstityState(keyRelevance);
}, keyRelevance);
useEffect(() => {
setValueIntenstityState(valueRelevance);
}, valueRelevance);
if (valueRelevanceState !== undefined && valueRelevanceState.length > 0) {
return (
returning component...
)
};
export default Relevance;

错误是关于什么的？

Answer 1

该错误告诉您，您没有将一致的值作为渲染之间的最终(第二个)参数(可选的依赖项数组)传递给useEffect。您传递useEffect依赖项数组参数必须始终是依赖项数组(具有相同的长度)，或者始终在组件的每个呈现上undefined(因为您通常将其关闭)。

你有以下代码：

if (/*...a condition...*/) {
// ...
var keyRelevance = [];
// ...
}
// ...
useEffect(() => {
// ...
}, keyRelevance);

这在功能上与以下功能相同：

var keyRelevance;              // ***
if (/*...a condition...*/) {
// ...
keyRelevance = [];         // ***
// ...
}
// ...
useEffect(() => {
// ...
}, keyRelevance);

这意味着您声明了一个最初具有值undefined的keyRelevance变量，然后仅在满足条件时才为其分配数组。然后，您将keyRelevance用作依赖项数组。

要useEffect的第二个参数应该是依赖项数组，而不仅仅是单个依赖项，因此keyRelevance包装在数组中：

useEffect(() => {
setKeyIntenstityState(keyRelevance);
}, [keyRelevance]);
// ^            ^

文档中有更多内容。

但另外，由于您每次都创建一个新数组，这会导致效果每次都发生变化。相反，使用useMemo或useRef来记忆keyRelevance(和类似)的创建(因为useMemo的文档说它只是为了性能优化，并且在你的情况下，你需要记住正确性的值，而不仅仅是优化)。

例如：

const relevanceInfo = useRef(null);
// (Probably put this condition in a function)
if (!relevanceInfo ||
data.length !== relevanceInfo.sourceData.length || 
data.some((d, index) => d.relevance !== relevanceInfo.sourceData[index].relevance)) {
relevanceInfo.keyRelevance = /* ...build the array... */;
relevanceInfo.sourceData = data;
}
// ...
useEffect(() => {
// ...
}, [relevanceInfo.keyRelevance]);

。或类似。

---

旁注：我不会在if块内声明变量，然后在if块外使用它。相反，请在将使用它的顶部作用域(在本例中为函数作用域)中声明它。(另外，我建议使用let和const，而不是var;var实际上已弃用，不应在新代码中使用。

Answer 2

useEffect 的最终值(第二个参数)应该在不同的值数组或空数组中。您正在提供一个valueRelevance作为useEffect的最终值，它本身是一个数组，但不在数组中，如下所示。

useEffect(() => {
setKeyIntenstityState(keyRelevance);
}, [valueRelevance]);

或

useEffect(() => {
setKeyIntenstityState(keyRelevance);
}, [param1, param2]);