当我不希望它依赖时，反应缺少依赖项警告

Question

我有一个类似的警告，但我不希望它想要我在依赖数组中添加的值，所以我应该抑制警告吗?

我有一个数组和一个索引，它们都作为状态存储在组件中。我想有一个useMemo钩子，每次索引改变时，根据索引指向的数组中的值更新一个值。我不希望它在数组更改时更新，所以我只有依赖项数组中的索引。有没有办法在不压制警告的情况下绕过这个问题?

Answer 1

有几种方法可以做到这一点，在没有看到代码的情况下，很难说哪种方法最适合您。假设您的组件看起来像这样:

const MyComponent = () => {
const [values, setValues] = useState<number[]>([0]);
const [index, setIndex] = useState(0);
// Calculate the value as 10x whatever the number is at index:
// WARNING - missing dependency
const calculatedValue = useMemo(
() => 10 * values[index],
[index]);
return (
// ...
);

您可以使用ref来跟踪值，然后在回调中使用它:

const valuesRef = useRef<number[]>(values);
valuesRef.current = values;
const calculatedValue = useMemo(
() => 10 * valuesRef.current[index],
[index]);

但是一个更好的解决方案，如果你只想在索引改变时改变计算值，是在回调中处理计算:

const runCalculation = (value: number) => 10 * value;
const MyComponnet = () => {
const [values, setValues] = useState<number[]>([0]);
const [index, setIndex] = useState(0);
const [calculatedValue, setCalculatedValue] = useState<number>(
() => runCalculation(values[index])
);
const handleChangeIndex = (nextIndex: number) => {
setIndex(nextIndex);
setCalculatedValue(runCalculation(values[nextIndex]));
};
return (
// ...
);
};