失败的道具类型:道具 todos[0].id 在 TodoList 中被标记为必需，但其值未定义 [英] Failed prop type: The prop todos[0].id is marked as required in TodoList, but its value is undefined

问题描述

我正在尝试使用

如何让 todos[0] 拥有唯一的 id?

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

function todos(state = [], action) {开关(动作.类型){案例ADD_TODO:返回 [...状态，{文字:动作.文字，完成:假，编号:1}]案例 TOGGLE_TODO:返回 state.map((todo, index) => {if (index === action.index) {返回 Object.assign({}, todo, {完成:!todo.completed})}返回待办事项})默认:返回状态}}

也许:

/**动作创造者*/导出函数 addTodo(text) {返回 { 类型:ADD_TODO，文本}}

需要添加 id 吗?

解决方案

我简要地查看了您的代码，我相信您没有得到那个 id 因为您没有导入动作创建者你认为你是的功能.

在容器/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 中的操作创建器导入，它没有您拥有的 id 属性原来是猜的.

删除该文件，它应该可以正常工作.

I'm trying to do the redux basic usage tutorial which uses react for the UI.

I'm getting this warning (in red though - perhaps it is an error?) in the console logs when I click a button labelled "Add Todo":

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)

So the todo that is getting added, has no id field - I need to figure out how to add an id.

in actions.js

/*
 * action creators
 */

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

actions/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
  }
}

containers/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

It looks like actions/index.js does add the todo id?

It's hard to debug because for some reason the chrome dev tools sources are missing the actions and reducers folders of my app:

How do I get the todos[0] to have a unique id?

note that when I add id: 1 here it does get the id added but it is not unique:

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
  }
}

Maybe:

/*
 * action creators
 */

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

needs id added?

解决方案

I briefly looked over your code, and I believe you're not getting that id because you're not importing the action creator function you think you are.

in containers/AddTodo.js:

import { addTodo } from '../actions'

In your project, you have

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

When you import or require anything (without using file extensions like the above '../actions'), the JS interpreter will look to see if there's a file called actions.js in the src folder. If there is none, it will then see if there's an actions folder with an index.js file within it.

Since you have both, your AddTodo component is importing using the action creator in ./src/actions.js, which does not have an id property as you had originally guessed.

Remove that file, and it should work as you intended.

这篇关于失败的道具类型:道具 todos[0].id 在 TodoList 中被标记为必需，但其值未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！