Question

尝试使用connect()中的react-redux函数时收到以下错误：

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>
    );
  }
};

这是聊天的相关代码结尾：

import { connect } from 'react-redux';


  ...


    const mapStateToProps = state => ({
  ...state
});
const mapDispatchToProps = dispatch => ({
  addMessage: () => dispatch(addMessage)
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Chat);

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

Answer 1

尝试一下：

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

export default ConnectedChat;

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

编辑：还要确保将聊天组件导入到App文件中，否则请确保将addMessage操作创建者导入。

Answer 2

您在哪里定义Chat您的connect函数中的组件？

我通常的设置是（我正在使用课程，但const ConnectedChart()仍将是同一设置）

class ConnectedChart extends Component {

//// All code here render and return etc

}

const Chart = connect (mapStateToProps)(ConnectedChat);

export default Chart;

因此，您实质上是使用connect语句将组件分配给Chart的，然后导出默认值。我认为直接导出连接语句可能会引发错误，但是如果这样做不起作用，请发布完整的图表组件，然后看看是否还有其他情况发生

编辑：基于完整代码

在您的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>
    );

，然后将div中心屏幕置于ConnectedChat

（（如果您以后要添加更多组件，并希望div封装所有组件，请创建一个主要的应用程序组件，例如着陆或类似的东西，并在提供商之间调用而不是聊天，然后在该着陆组件中呈现div和您的ChatComponent）

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

使用React-Redux“ connect”时App类出错

2 个答案: