Reactjs 为什么不是'；我的状态是否正确映射到Redux中的道具？

我创建了这个组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';

export class Todos extends Component {
  render() {
    //todo remove
    console.log('testing this.props.todos', this.props.todos);

    //todo remove
    debugger;

    return (
      <div>hello from todos</div>
    );
  }
}

const mapStateToProps = function (store) {
  return {
      todos: store.todos
  }
}

export default connect(mapStateToProps)(Todos)

---

由于某些原因，

this.props.todos

未定义，并且我的状态未正确映射到我的道具。我如何将Redux存储连接到我的组件？

问题是您没有将存储正确地传递到您的组件！如果要使用

connect

将组件连接到全局状态，则必须使用提供的组件。因此，首先，您使用

createStore

创建存储，然后将其传递给提供商：

import store from './store.js';
import { Provider } from 'react-redux'; 

const App = () => (
  <Provider store={store}>
    <Todos />
  </Provider>
);

ReactDOM.render(
  <div className="container">
    <App />
  </div>
, document.getElementById('root'));

这是错误的。在您的

todos.jsx

中，您将导出

connect

ed组件，如下所示，作为默认导出：

export default connect(mapStateToProps)(Todos)

因此，您必须导入默认值：

---

它不应该呈现应用程序而不是div.container吗？@bierhier是的，我的错。EditedI接受了你的建议，但商店仍然没有纳入待办事项component@bierhier看来你导入错误了！执行从“…”导入TODO的操作。-您正在将注入的组件作为默认导出，而不是作为命名导出导出！您可以登录mapStateToProps中的存储并查看您得到了什么吗？现在一切都很好，请参见下文

import { Todos } from './components/todos.jsx';

export default connect(mapStateToProps)(Todos)

import Todos from './components/todos.jsx';