React：使用 Refs 修复缺少的依赖警告 useEffect答案

【问题标题】：React: Fix missing dependency warning useEffect with RefsReact：使用 Refs 修复缺少的依赖警告 useEffect
【发布时间】：2020-11-24 11:24:45
【问题描述】：

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

  const modalContext = useContext(ModalContext);

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

但我有这个警告：

React Hook useEffect 缺少一个依赖项：'modalContext'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

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

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

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

我想知道这是否是正确的做法，或者这是一种不好的做法。

谢谢！

【问题讨论】：

这取决于showModal 是什么以及是否可以有stale closure
showModal 是一个改变“isModalOpen”布尔值的函数。这是我保存在上下文 API 中的变量。我想使用上下文 API 来看看它如何与这个有模式的例子一起工作，而不是在几个组件中传递变量“isModalOpen”

标签： reactjs react-hooks react-functional-component

【解决方案1】：

也许以下对你有用：

const ModalContext = React.createContext();
const ModalProvider = ({ children }) => {
  const [isModalOpen, setIsModalOpen] = React.useState(
    false
  );
  //show modal never changes because using useCallback
  const showModal = React.useCallback(
    () => setIsModalOpen(true),
    []
  );
  return (
    <ModalContext.Provider
      value={{
        isModalOpen,
        showModal,
      }}
    >
      {children}
    </ModalContext.Provider>
  );
};
const Modal = () => {
  const { isModalOpen } = React.useContext(ModalContext);
  return isModalOpen ? 'modal shows' : null;
};
const App = () => {
  const [error, setError] = React.useState('');
  const { showModal } = React.useContext(ModalContext);

  React.useEffect(() => {
    if (error !== '') {
      showModal();
    }
  }, [error, showModal]);
  return (
    <div>
      <button onClick={() => setError('error')}>
        set error
      </button>
      <Modal />
    </div>
  );
};

ReactDOM.render(
  <ModalProvider>
    <App />
  </ModalProvider>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

是的，这行得通！它帮助我以更有效的方式重新构建我的代码，并且这些回调不需要设置依赖项“modalContext”，只需设置函数“showModal”。多亏了这一点，当我隐藏模态时，React 不会执行 useEffect 再次显示模态。谢谢！

【解决方案2】：

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

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

【讨论】：

当然应该。试一试
是这样吗？ modalContext .showModal(); modalContex 和 .showModal(); 之间有一个空格
抱歉，这只是一个印刷错误。我会改正的。
以循环结束，因为我显示模态，然后单击关闭按钮的模态，但反应检测到该依赖项的变化并在 useEffect 中执行该代码，当用户再次显示模态关闭它。
哦。那是因为我没有看到你的完整代码 Encarna。您可以设置一个额外的状态来控制模式何时显示并出现错误。