Javascript 使用React Redux时应用程序类出错；“连接”；

尝试使用

react redux

中的

connect（）

函数时，我收到以下错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.

这是一个应用程序：

import { Provider } from 'react-redux';
import configureStore from './store';
const App = class extends React.PureComponent {
  render() {
    const { title } = this.context;
    return (
      <div className="center-screen">
        {title}
        <Provider store={configureStore()}>
          <Chat />
        </Provider>
      </div>
    );
  }
};

使用“导出默认聊天”而不是“连接”时，它工作正常。

尝试以下操作：

const ConnectedChat = connect(
  mapStateToProps,
  mapDispatchToProps
)(Chat);

export default ConnectedChat;

或者，您可能希望将类定义重命名为ConnectedChat并反转名称，以便将其作为聊天导入

---

编辑：还要确保您正在导入应用程序文件中的聊天组件，如果您没有导入，还要导入addMessage action creator。

在连接功能中，您在哪里定义聊天组件

我通常的设置是（我正在使用class，但是

const ConnectedChart（）

仍然是相同的设置）

这样，您就可以使用connect语句将一个组件分配给图表，然后导出默认值。我认为直接导出connect语句可能会抛出一个错误，但如果这不起作用，请发布完整的图表组件，我将查看是否还有其他问题

---

编辑：基于完整代码

在你的App.js中尝试以下操作：

import React from "react";
import ReactDOM from 'react-dom';
import "./App.css";
import ConnectedChat from "./Chat";
import { Provider } from "react-redux";
import configureStore from "./store";

ReactDOM.render(
        <Provider store={configureStore()}>
          <ConnectedChat />
        </Provider>
    );

从“React”导入React；
从“react dom”导入react dom；
导入“/App.css”；
从“/Chat”导入ConnectedChat；
从“react redux”导入{Provider}；
从“/store”导入configureStore；
ReactDOM.render(
);

然后将您的div中心屏幕置于ConnectedChat中

（如果以后要添加更多组件，并希望该div包装所有组件，请创建一个主应用程序组件，如landing或其他，并在提供商之间调用该组件，而不是chat，然后在该landing组件中呈现div和chat组件）

---

此外，如果没有index.js，请将package.json中的“main”更改为App.js组件

我仍然会收到相同的错误。我使用了与您发布的代码相同的代码，现在app.js使用ConnectedChat而不是ChatHmm。你能发布完整的聊天组件吗？我在这里添加了聊天和应用程序（这是一个精简版本，它什么也不做，但在这里仍然不起作用。所以不管我的完整组件有什么问题（很遗憾，我不能完全透露），它在这个版本中仍然存在）：有些东西没有正确导入或导出，如果没有整个源代码树，很难判断。乍一看，所有语句似乎都遵循正确的语法，我会仔细检查所有路由，并确保大小写和路径对齐（例如，如果文件名为“Chat.js”，则从“/Chat”导入将抛出错误）。为了方便起见，你可能刚刚在沙盒上把它命名了，但我会仔细检查所有东西以确定。我可以通过重命名这些内容并删除未使用的引用来让沙盒正常工作。我在这里添加了聊天和应用程序（这是一个精简版本，它什么也不做，但在这里仍然不起作用。因此，无论我的完整组件有什么问题（很遗憾，我不能完全公开），它在这个版本中仍然有效）：您的src目录中是否有index.js，或者App.js是否是呈现其他所有内容的基本文件？如果应用程序是你的基础文件，我想问题在于你如何渲染它。我在上面添加了一些新的建议，我应该把“ReactDOM.render”放在哪里？在App？的返回方法中？。是的，有一个index.js文件使用App.jsReact DOM.render应该放在你的索引中或者你最根的文件中，因为它只能有一个子组件，而这个子组件（通常称为App.js）是你应用程序中所有其他组件的父组件。因此，我在上面使用configure store和reactDOM.render编写的内容应该都在根react文件中，不管它叫什么（通常是索引）

class ConnectedChart extends Component {

//// All code here render and return etc

}

const Chart = connect (mapStateToProps)(ConnectedChat);

export default Chart;

import React from "react";
import ReactDOM from 'react-dom';
import "./App.css";
import ConnectedChat from "./Chat";
import { Provider } from "react-redux";
import configureStore from "./store";

ReactDOM.render(
        <Provider store={configureStore()}>
          <ConnectedChat />
        </Provider>
    );