React Uncaught Invariant Violation：元素类型无效：需要一个字符串答案

【问题标题】：React Uncaught Invariant Violation: Element type is invalid: expected a stringReact Uncaught Invariant Violation：元素类型无效：需要一个字符串
【发布时间】：2020-05-10 19:30:57
【问题描述】：

我正在尝试使用钩子和 React 上下文/提供程序在我的应用程序中显示模式。但是当我尝试展示它时，我收到了这个错误：

这是一段代码：

我的提供者

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;

唯一可行的方法是当我使用 ModalContent.type 之类的道具“类型”时，我真的不知道为什么会这样。

【问题讨论】：

在您的 ModalProvider 中，尝试在 value 属性上添加一组额外的花括号
你指的是哪个地方？
我遇到了同样的错误。另一种可行的方法是编写 { ModalContent }

标签： reactjs object types element

【解决方案1】：

这里的问题是您在使用 setModalContent 函数时将组件保存为函数。

之所以如此，是因为可以使用返回初始状态或更新状态的函数来初始化和更新状态，因此您需要提供一个函数，该函数又返回您想要置于状态的函数。

因此，为了使这项工作正常进行，您可以使用匿名函数将 setModalContent 的执行包装在 showModal 函数中，如下所示：


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

希望对你有帮助！

【讨论】：

【解决方案2】：

您可以尝试在您的 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>

【讨论】：