Reactjs 反应：修复缺少的依赖项警告useEffect和引用

我有一个功能组件，如果调用API时出错，我希望打开一个显示该错误的模式。决定此模式是否打开的属性使用上下文API存储。 因此，我在组件中有以下代码：

  const modalContext = useContext(ModalContext);

  useEffect(() => {
    if (error !== "") {
      modalContext.showModal();
    }
  }, [error]);

但我有一个警告：

React Hook useEffect缺少依赖项：“modalContext”。包括它或删除依赖项数组react hooks/dep

我读到为了解决这个问题，我可以使用refs，所以我更改了代码，现在我有：

  const modalContextRef = React.useRef(false);
  modalContextRef.current = useContext(ModalContext);

  useEffect(() => {
    if (error !== "") {
      modalContextRef.current.showModal();
    }
  }, [error]);

我不知道这是正确的方法，还是一种不好的做法

---

谢谢

您可以尝试将modalContext添加到其依赖项中

useEffect(() => {
  if (error !== "") {
    modalContext.showModal();
  }
}, [error, modalContext]);

---

也许以下几点对你有用：

const ModalContext=React.createContext（）；
const ModalProvider=（{children}）=>{
常量[isModalOpen，setIsModalOpen]=React.useState(
假的
);
//显示模式从不更改，因为使用useCallback
const showModal=React.useCallback(
（）=>setIsModalOpen（真），
[]
);
返回(
{儿童}
);
};
常量模态=（）=>{
const{isModalOpen}=React.useContext（ModalContext）；
返回isModalOpen？“模态显示”：null；
};
常量应用=（）=>{
const[error，setError]=React.useState（“”）；
const{showmodel}=React.useContext（ModalContext）；
React.useffect（（）=>{
如果（错误！=''）{
showModal（）；
}
}，[error，showmodel]）；
返回(
setError（'error'）}>
设置错误
);
};
ReactDOM.render(
,
document.getElementById（'root'））
);

这取决于showmodel是什么，以及它是否可以有一个showmodel函数来更改“isModalOpen”的布尔值。这就是我保存在上下文API中的变量。我想使用context API来看看它是如何与这个示例一起工作的，这个示例具有一个模态，并且不在几个组件中传递变量“isModalOpen”。试一试，对吗<代码>modalContext.showmodel（）

在

modalContex

和

.showmodel（）之间有一个空格