Question

我正在学习Redux并做基础教程，即使我仔细检查过，我也不知道地图会发生什么。
这是错误：

TypeError：无法读取未定义
的属性“map”

这是我的代码：

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false 
      }
    case 'TOGGLE_TODO':  
        if (state.id !== action.id) {
          return state; 
        }
        return {
          ...state,
          completed: !state.completed
        }; 
    default:
      return state;
  }
}

let initialState = []
const todos = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
        return [
          ...state,
          todo(undefined, action)
        ];    
   case 'TOGGLE_TODO': 
      return state.map(t => todo(t, action))      
   default:
      return state; 
  }
}

const visibilityFilter = (state = 'SHOW_ALL', action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter;
    default: 
      return state;
  }
}

const todoApp = Redux.combineReducers(
  todos,
  visibilityFilter
)

let nextTodoId = 0
class App extends React.Component {
  render() {
    return (
      <div>
        <form>
          <input type="text"/>
          <button type="submit"
            onClick={e => {
              e.preventDefault()
              store.dispatch({
                type: 'ADD_TODO',
                text: 'hello',
                id: nextTodoId++,
                completed: false
              })
            }}
          >
            Add Task
          </button>
        </form>
        <ul>
          {this.props.todos.map(todo => 
             <li key={todo.id}>
              {todo.text}
             </li>
          )}
        </ul>
        <div>
          Show: 
          {"  "}
          <a href="#">All</a>
          {" . "}
          <a href="#">Active</a>
          {" . "}
          <a href="#">Completed</a>
        </div>
      </div>
    );
  }
}

const store = Redux.createStore(todoApp)

const render = () => {
  ReactDOM.render(
    <App todos={store.getState().todos}/>,
    document.getElementById('app')
  );
}

store.subscribe(todoApp)
render()

请帮帮我。

Answer 1

你的store.getState（）返回undefined。

没有

store.getState().todos

因此，您无法映射未定义的内容。

您的商店创建错误。结合减速器，这样做。（请注意“{”）

Redux.combineReducers(
  {
    todos,
    visibilityFilter
  }
)

你的store.subscribe也会提供另一个错误。它将使用action = undefined调用商店。使用以下方法执行此操作：（取自http://redux.js.org/docs/basics/Store.html）

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

Answer 2

我认为主要的罪魁祸首是：

store.subscribe(todoApp)

相反它应该是这样的：

store.subscribe(render)

此外，您应该将对象传递给combineReducer函数，如下所示：

const todoApp = combineReducers({
   todos,
   visibilityFilter
})

有关工作示例，请参阅此link。

Answer 3

在使用map之前检查todo属性，因为它可能在初始状态时未定义

<ul>
      { this.props.todos && this.props.todos.map(todo => 
         <li key={todo.id}>
          {todo.text}
         </li>
      )}
    </ul>

<强> JSBIN

redux todo list - 坚持'map'错误

3 个答案: