Redux / React:必须将组件传递给connect返回的函数。而是收到{}

时间:2018-10-05 23:57:31

标签: react-redux

我是新来的反应/ redux。使用create-react-app创建项目后,我修改了index.js和App.js:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { Provider } from 'react-redux';
import { createStore } from 'redux';

function reducer() {
    return {
        message: 'hello, world'
    };
}

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
  <App />
  </Provider>, 
  document.getElementById('root')
)

registerServiceWorker();

App.js

import React, { Component } from 'react';
import './App.css';
import { connect } from "react-dedux";

class App extends Component {
  render() {
    return (
      <div>
        <p>The message: {this.props.msg}</p>
      </div>
    );
  }
}


function mapStateToProps(state) {
  return {
    msg: state.message
  };
}

export default connect(mapStateToProps)(App);

这是我正在尝试的最简单的演示版本。 错误消息是“您必须将组件传递给connect返回的函数。而不是收到{}”。我一直在将我的代码与许多教程进行比较,但找不到根本原因。

1 个答案:

答案 0 :(得分:0)

我不敢相信,我的代码是

import { connect } from "react-dedux";

,而正确的软件包名称是react-redux。因此,在将其更改为

之后
import { connect } from "react-redux";

有效!至少证明我是在绑代码,而不是粘贴粘贴。这种自动完成功能欺骗了我。