React 16.3 上下文：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象

Posted 2023-04-14

【中文标题】React 16.3 上下文：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象

【英文标题】：React 16.3 Context: expected a string (for built-in components) or a class/function (for composite components) but got: object

【发布时间】：2018-11-29 20:10:55

【问题描述】：

我对 React 比较陌生，所以这可能是一件非常简单的事情。

基本上，我一直在尝试使用 Context 来操作模态。我已经设置了我的上下文（一个单独的文件）：

import  createContext  from 'react';

export const ModalContext = createContext(false);

将它导入我的组件（使用 VS2017，所以我得到了 Intellisense）：

import  ModalContext  from "../contexts/ModalContext";

尝试在render方法中实现：

public render() 
        let table = this.state.loading
            ? <p><em>Loading...</em></p>
            : this._renderUrlsTable(this.state.urls);

        return <ModalContext.Provider value=this.state.isAddMode>
            <div>
                <h1>Urls</h1> 
                <ModalContext.Consumer>
                    val =>
                        <button disabled=val>Button</button>
                    
                </ModalContext.Consumer>
                table                
            </div>
        </ModalContext.Provider>;
    

然而，我接受了这种美丽：

Invariant Violation：元素类型无效：应为字符串（对于 内置组件）或类/函数（用于复合组件） 但得到了：对象。

现在，我知道有大量类似的帖子，但我找到的解决方案都没有。实际上，他们中的大多数都指向错误的导入，这不应该是这种情况。

我的 React 依赖项：

“反应”：“^16.4.1”， “react-dom”：“^16.4.1”， “react-hot-loader”：“3.0.0-beta.7”， “反应模式”：“3.1.13”， "react-router-dom": "4.1.1", “@types/react”：“^16.3.18”， "@types/react-dom": "^16.0.6", "@types/react-hot-loader": "3.0.3", “@types/react-modal”：“3.1.1”， “@types/react-router”：“4.0.12”， "@types/react-router-dom": "4.0.5", “打字稿”：“2.9.1”

总结一下，知道是什么原因造成的吗？

PS。对于那些不珍惜生命的人，我附上堆栈跟踪。

invariant
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118:15
ReactCompositeComponentWrapper.instantiateReactComponent
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:20273:23
ReactCompositeComponentWrapper.performInitialMount
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29799:22
ReactCompositeComponentWrapper.mountComponent
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690:21
Object.mountComponent
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868:35
ReactCompositeComponentWrapper.performInitialMount
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29803:34
ReactCompositeComponentWrapper.mountComponent
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690:21
Object.mountComponent
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868:35
ReactDOMComponent.mountChildren
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:34169:44
ReactDOMComponent._createInitialChildren
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:31157:32

编辑：_renderUrlsTable 代码：

private _renderUrlsTable(urls: UrlViewItem[]) 
    this._prepareTable(urls);

    return(
    <div className='col-sm-12'>
        <table className='table'>
            <thead>
                <tr>
                    <th>Original URL</th>
                    <th>Code</th>
                    <th>Expiration date</th>
                    <th>Brand</th>
                    <th>Is generic NotFound page?</th>
                    <th>NotFound page</th>
                    <th>Visits</th>
                    <th>First visit</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                this.rows
            </tbody>
        </table>
        </div>
    );

【问题讨论】：

你能发帖this._renderUrlsTable吗？

@PANAYIOTIS 它需要更多的方法和一些子组件。删除它也无济于事，但可以肯定。

我们确定这是导致问题的组件吗？如果您从您的 render() 方法中只返回一个 <div/> 怎么办，错误会消失吗？

@PANAYIOTIS，是的，这在实施 Context 之前没有发生。我的应用程序已经启动并运行了几天。

好吧，我已经复制了您编写的确切代码 codesandbox.io/s/p98mpvy5nx 并且没有错误。不确定问题中缺少什么，但确实有。

【参考方案1】：

export const ModalContext = createContext(false);

我认为createContext 的参数应该是字符串或未定义。

另一件事是以下代码的作用：

val =>
      <button disabled=val>Button</button

这是一个函数，我认为 JSX 是不允许的。

我不确定，但希望这能解决您的问题。

【讨论】：

在 createContext 子句中将“false”更改为“undefined”没有帮助。介意详细说明另一点吗？我从 React 的 Context 文档中获取了这个语法。

val => <button disabled=val>Button</button> 基本上是一个不支持作为任何 JSX 元素的子元素的函数。你可以直接写<button disabled=val>Button</button>，前提是你有val变量

还有你为什么在反应类函数中使用public 和private 关键字。不需要，请参考 react 文档获取帮助

我基本上是从 React 的文档中复制了这个解决方案。我使用的是 public 和 private，因为我最初是一名 C# 开发人员，没有什么比干净且定义明确的代码更好的了。

https://reactjs.org/docs/state-and-lifecycle.html 你在哪里读过public 或private ？

【参考方案2】：

我无法确认，但我认为 16.3.0 中存在错误。我遇到了同样的错误；但是，我恢复到 15.6.x，一切都恢复正常了。

这是我当前（还原的）反应依赖列表：

“反应”：“15.6.1” “react-dom”：“15.6.1” “react-hot-loader”：“3.0.0-beta.7” “反应传单”：“^1.8.0” “react-router-dom”：“4.1.1”