Question

我正在尝试通过创建我自己的待办事项应用程序来学习Redux，而没有Redux官方todo app example中的风格。我无法显示我的待办事项列表，因为我正在TypeError: Cannot read property 'map' of undefined。

可以找到回购here。它相当轻量级（比Redux的todo-app更少的组件）。

这是我遇到麻烦的部分：

/src/components/TodoList.js

import React from 'react';

const TodoList = ({todos}) => {
  return (
    <ul>
      {todos.map(todo =>
        <li key={todo.id}>{todo.text}</li>
      )}
    </ul>
  )
}

export default TodoList;

我还在connect个容器上使用ViewTodoList.js。如果我理解正确，通过这样做，我应该使用商店状态填充我的todos：

/containers/ViewTodoList.js

import React from 'react';
import {connect} from 'react-redux';
import TodoList from '../components/TodoList';

const mapStateToProps = (state) => {
  todos: state.todos
}

const ViewTodoList = connect(
  mapStateToProps
)(TodoList)

export default ViewTodoList;

我很确定我的Redux商店有正确的状态。可以找到AddTodo here。

但是，由于某些原因，TodoList内的components/TodoList.js组件未在{todos}内接收待办事项状态。我想我可能在这里犯了一些错误。

如何在todos内正确显示所有TodoList州？

Answer 1

您忘记在mapStateToProps中返回值。它应该是：

const mapStateToProps = state => ({
  todos: state.todos,
});

无法在react-redux中显示待办事项（属性图未定义）？

1 个答案: