reactjs - 失败的 Prop 类型 : The prop todos[0]. id 在 TodoList 中标记为必需，但其值未定义

Question

我正在尝试执行 redux basic usage tutorial它对 UI 使用 react 。

当我单击标有“添加待办事项”的按钮时，我在控制台日志中收到此警告(虽然是红色的 - 也许这是一个错误？):

warning.js:36 Warning: Failed prop type: The prop todos[0].id is marked as required in TodoList, but its value is undefined. in TodoList (created by Connect(TodoList)) in Connect(TodoList) (at App.js:9) in div (at App.js:7) in App (at index.js:12) in Provider (at index.js:11)

所以要添加的待办事项没有 id 字段 - 我需要弄清楚如何添加 id。

在 actions.js

/*
 * action creators
 */

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

Action /index.js

let nextTodoId = 0
export const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  }
}

export const setVisibilityFilter = (filter) => {
  return {
    type: 'SET_VISIBILITY_FILTER',
    filter
  }
}

export const toggleTodo = (id) => {
  return {
    type: 'TOGGLE_TODO',
    id
  }
}

容器/AddTodo.js

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

看起来 actions/index.js 确实添加了 todo id？

很难调试，因为出于某种原因，chrome 开发工具源缺少我的应用程序的操作和 reducers 文件夹:

如何让 todos[0] 有一个唯一的 id？

请注意，当我在此处添加 id: 1 时，它确实添加了 id，但它不是唯一的:

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false,
          id: 1
        }
      ]
    case TOGGLE_TODO:
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: !todo.completed
          })
        }
        return todo
      })
    default:
      return state
  }
}

也许:

/*
 * action creators
 */

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

需要添加 id 吗？

Answer 1

我简要地查看了您的代码，我相信您没有得到那个 id，因为您没有导入您认为是的 Action 创建者函数。

在 containers/AddTodo.js 中:

import { addTodo } from '../actions'

在你的项目中，你有

./src/actions.js
./src/actions/index.js

当你导入或需要任何东西时(不使用像上面的 '../actions' 这样的文件扩展名)，JS 解释器将查看是否有一个名为 actions.js 的文件 在 src 文件夹中。如果没有，它将查看是否有一个 actions 文件夹，里面有一个 index.js 文件。

因为你有两个，你的 AddTodo 组件正在使用 ./src/actions.js 中的 Action 创建器导入，它没有你有的 id 属性最初猜测。

删除该文件，它应该可以按预期工作。