如何解决React - 尽管程序运行良好,但 useMemo 会发出警告 (useMemo 有一个不必要的依赖)
首先对糟糕的代码感到抱歉。我是 React 的新手,所以请原谅:P。在这里,我创建了 2 个按钮,“添加”和“更改假货”。当我点击“添加”时,它不会重新渲染子组件,当我点击“更改假”时,它会重新渲染组件,因为我的依赖在 useMemo 中发生了变化,它会创建并向子组件发送一个新的对象道具.但是我收到 useMemo 的警告,说这是一个不必要的依赖项,尽管我需要依赖项。我怎么能去那个警告消失。有没有更好的方法来做到这一点?
注意:我的子组件是一个虚拟组件。它对这些道具没有任何作用。
import Child from "./Child";
const Parent = () => {
const [count,setCount] = useState(0);
const fakeValue = useRef(10);
const randomProp = useMemo(() => {
return { val: fakeValue.current };
},[fakeValue.current]);
const changeFake = () => {
fakeValue.current = fakeValue.current + 1;
setCount(count + 1);
};
return (
<>
<div>{count}</div>
<div>{fakeValue.current}</div>
<button onClick={() => setCount(count + 1)}>add</button>
<button onClick={() => changeFake()}>Change fake</button>
<Child randomProp={randomProp} />
</>
);
};
export default Parent;
输出链接:https://i.stack.imgur.com/5spw1.png CodeSandBox 链接:https://codesandbox.io/s/silly-pine-fzjw9?file=/src/
也许是个愚蠢的问题。但我会感谢社区的一些反馈:)
解决方法
fakeValue.current
是一个不必要的依赖项,因为改变它不会重新渲染组件。我们不添加引用作为依赖项。
您可以通过添加一个空数组作为对 useMemo
的依赖来消除警告。
const randomProp = useMemo(() => {
return { val: fakeValue.current };
},[]); // Pass an empty array like this
https://codesandbox.io/s/usememo-warning-67955446-5x8j3
如果您需要进一步的支持,请告诉我。
,当您将 fakeValue.current
ref 直接传递给 useMemo
的依赖项时,它不会更改 randomProp
的值。那么子组件不会re-render
。
所以你需要做这样的事情。
const randomValue = fakeValue.current;
const randomProp = useMemo(() => {
return { val: randomValue };
},[randomValue]);
如果不需要重新渲染,只想去掉警告,可以去掉fakeValue.current
依赖
CodeSandbox 链接修改代码:https://codesandbox.io/s/stoic-thunder-9ylxi?file=/src/Parent.js
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。