Реагировать: исправить отсутствующее предупреждение о зависимости useEffect с помощью ссылок

Question

У меня есть функциональный компонент, где, если у меня есть ошибка при вызове API, я хочу открыть модальное окно, показывающее эту ошибку. Свойство, определяющее, открыт ли этот модальный экран, сохраняется с помощью контекстного API. Итак, у меня был этот код в компоненте:

  const modalContext = useContext(ModalContext);

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

Но у меня есть это предупреждение:

React Hook useEffect имеет недостающую зависимость: 'modalContext'. Либо включите его, либо удалите массив зависимостей response-hooks / excustive-deps

Я читал, что для решения этой проблемы я могу использовать refs, поэтому я изменил код и теперь у меня:

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

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

Интересно, правильный ли это способ продолжить или это плохая практика.

Спасибо!

Answer 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>

Answer 2

Вы можете попробовать добавить modalContext к его зависимостям.

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