Question

我更改了 /components/TodoList.js ，因为我不想使用输入字段和“添加待办事项”按钮，但我只想在那里拥有自己的汽车数据。这是我的代码：

import React from 'react'
import PropTypes from 'prop-types'
import Todo from './Todo'

const cars = [
  {text: 'Audi', id: 1},
  {text: 'Nissan', id: 2},
  {text: 'Mazda', id: 3},
]

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {cars.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

export default TodoList

如何让切换工作（我的意思是标记车完成：真||假）？在 /reducers/todos.js 中，我有以下内容：

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ]
    case 'TOGGLE_TODO':
      return state.map(todo =>
        (todo.id === action.id) 
          ? {...todo, completed: !todo.completed}
          : todo
      )
    default:
      return state
  }
}

export default todos

这部分显然是错误的：

(todo.id === action.id)

我尝试了各种各样的东西，但是无法在“奥迪”，“日产”和“马自达”上进行切换（已完成：真实||假）。我也尝试过查看其他问题，但找不到解决方案。

如何标记汽车“已完成”？

Answer 1

这里的问题是你使用硬编码的汽车列表，而不是通过Redux返回的状态。你派遣的东西并不重要; cars变量永远不会更新，因此永远不会收到切换状态。

此处的解决方案是在初始Redux状态下使用该列表。

const initialState = [
  { text: 'Audi', id: 1, completed: false },
  { text: 'Nissan', id: 2, completed: false },
  { text: 'Mazda', id: 3, completed: false }
]

const todos = (state = initialState, action) => {
  switch (action.type) {
  case 'ADD_TODO':
    return [
      ...state,
      {
        id: action.id,
        text: action.text,
        completed: false
      }
    ]
  case 'TOGGLE_TODO':
    return state.map(todo =>
      (todo.id === action.id) 
        ? {...todo, completed: !todo.completed}
        : todo
    )
  default:
    return state
  }
}

export default todos

如何标记使用Redux完成的项目？

1 个答案: