我有一个伪代码Reaction组件,与下面的组件类似:
const codeApplier = ({ code, prices }: Props) => {
const [isAccepted, setIsAccepted] = useState(false);
const applyCode = useCallback(async () => {
const validationResult = await callToApplyCode(code, prices);
if (validationResult.status === "OK") {
setIsAccepted(true);
} else {
setIsAccepted(false);
}
//do more stuff
}, [code, prices]);
useEffect(() => {
if (isAccepted) applyCode();
}, [prices]);
return <button onClick={applyCode} />;
};
重要部分:
- 如果用户单击按钮,我想要应用代码
- 如果价格变化,我想重新应用代码
现在,像这样的组件工作得很好,但Lintert抱怨说,在useEffect上,我没有列出所有的依赖项.臭名昭著的穷举法.
问题是:如果我像这样将"applyCode"(甚至isAccepted)添加到useEffect的依赖项中:
useEffect(() => {
if (isAccepted) applyCode();
}, [isAccepted, applyCode, prices]);
然后,林特很高兴,但useEffect将在每次点击时重复调用.
- 更改"code"->;自动更改"applycode"-预期为>;
- OnClick-&>调用新的应用程序代码-&>预期
- CallToApplyCode-应为>;
- "applycode"更改触发的useEffect->;applycode();->;意外
- 另一个调用ToApplyCode->;不需要
这是不是属于这样一种情况:禁用穷举alert 是可以的? 或者,有没有一种方法可以在不惹恼林特的情况下重构组件?
我看了这条 comments :https://github.com/facebook/react/issues/14920#issuecomment-471070149 以及StackOverflow上的各种类似问题,但我无法找到我具体 case 的答案.