Реагировать на необработанное нарушение инварианта - PullRequest
Новая
       49

Реагировать на необработанное нарушение инварианта

0 голосов
/ 24 января 2020

Я пытаюсь использовать хуки и контекст / провайдер React, чтобы показать модальность в моем приложении. Но когда я пытаюсь показать это, я получаю эту ошибку: enter image description here

Вот фрагмент кода:

Мой поставщик 

function ModalProvider({ children }) {
const [ModalContent, setModalContent] = useState(null);
const [modalData, setModalData] = useState(null);
const [open, setOpen] = useState(false);

const showModal = useCallback(
    ({ content, data }) => {
        setModalContent(content);
        setModalData(data);
        setOpen(true);
    },
    [setModalContent, setModalData, setOpen],
);

const hideModal = useCallback(
    () => {
        setModalContent(null);
        setModalData(null);
        setOpen(false);
    },
    [setModalContent, setModalData, setOpen],
);

const value = useMemo(
    () => ({
        ModalContent,
        open,
        modalData,
        showModal,
        hideModal,
    }),
    [ModalContent, modalData, open, showModal, hideModal],
);

return (
    <ModalContext.Provider value={value}>
        <Modal isOpen={open} setIsOpen={setOpen} titleText="Hello from Modal">
            {ModalContent && <ModalContent />}
        </Modal>
        {children}
    </ModalContext.Provider>
);

ModalProvider.propTypes = {
    children: PropTypes.node,
};

export default memo(ModalProvider);

Реализация 

    const Modal = () => {
    return (
        <div><h1>Test Modal</h1></div>
    );
}

const Home = ({
    logout,
}) => {
    const { showModal, hideModal } = useModalDispatcher();

    return (
        <div>
            <Button onClick={() => showModal({ content: Modal })} size="small">SHOW</Button>
            <Button onClick={() => hideModal()} size="small">HIDE</Button>
        </div>
    );
};

Home.displayName = 'Home';
Home.propTypes = {
    logout: PropTypes.func.isRequired,
};

export default Home;

Единственный способ, которым это работает, - это когда я использую проп "type" что-то вроде ModalContent.type Я действительно не знаю, почему это так.

Ответы [ 2 ]

1 голос
/ 24 января 2020

Проблема в том, что вы сохраняете компонент как функцию при использовании функции setModalContent.

Это так, поскольку состояние может быть инициализировано и обновлено с помощью функции, которая возвращает начальное состояние или обновленное состояние, вам необходимо предоставить функцию, которая в свою очередь возвращает функцию, которую вы хотите перевести в состояние.

Итак, чтобы заставить это работать, вы можете обернуть выполнение вас setModalContent внутри функции showModal анонимной функцией, например: 


const showModal = useCallback(
    ({ content, data }) => {
        setModalContent(() => content);
        setModalData(data);
        setOpen(true);
    },
    [setModalContent, setModalData, setOpen],
);

Надеюсь, это поможет!

0 голосов
/ 24 января 2020

Можете ли вы попробовать изменить это в вашем компоненте ModalProvider 

<Modal isOpen={open} setIsOpen={setOpen} titleText="Hello from Modal">
  {ModalContent && <ModalContent />}
</Modal>

На это 

<Modal isOpen={open} setIsOpen={setOpen} titleText="Hello from Modal">
  {ModalContent && {ModalContent}}
</Modal>
...