Question

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

column_default_sort

但是我有这个警告：

反应挂钩useEffect缺少依赖项：'modalContext'。要么包含它，要么删除依赖项数组react-hooks / exhaustive-deps

我读到要解决此问题，可以使用引用，因此我更改了代码，现在有了：

  const modalContext = useContext(ModalContext);

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

我想知道这是否是正确的进行方法还是不好的做法。

谢谢！

Answer 1

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

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

Answer 2

以下内容可能对您有用：

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>

反应：修复缺少依赖项警告useEffect与Refs

2 个答案: