失敗した小道具の種類：小道具[0] .idがTodoListで必須とマークされていますが、その値が定義されていません

Question

UIの反応を使用するredux basic usage tutorialを実行しようとしています。

私は（ただし、赤で - おそらくそれは誤りである？）、この警告を得ている私は「藤堂を追加」というボタンをクリックすると、コンソールログに：

warning.js：36警告：プロップタイプに失敗しました：todos[0].id小道具は、TodoListに必要に応じてマークされた ですが、その値はundefinedです。 （TodoList）の （Connect（TodoList）で作成） （アプリケーション名：9） （index.js：11）

追加されているToDoにはIDフィールドがありません。IDを追加する方法を理解する必要があります。それはactions/index.jsのように見えるactions.js

/* 
* action creators 
*/ 

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

アクション/ 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 

はTODO idを追加しますか？

何らかの理由でクロムのdevのツールのソースは私のアプリの行動や減速フォルダが不足しているので、それをデバッグするのは難しい：

私はドスを取得するにはどうすればよい[0 ]一意の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追加私はここにid: 1を追加するとき、それはidが追加されますんが、それは一意ではないことを

ノート？

Answer 1

私は簡単にあなたのコードを調べました。あなたが思うアクションクリエイター機能をインポートしていないので、idが届かないと思います。

コンテナ/ AddTodo。JS：あなたは（上記'../actions'のようなファイル拡張子を使用せずに）何をインポートするか、必要な場合

import { addTodo } from '../actions' 

プロジェクトでは、あなたが

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

を持って、JSインタプリタはありますかどうかを確認するために見ていきますactions.jssrcという名前のファイルです。存在しない場合は、アクションフォルダにindex.jsというファイルが含まれているかどうかを確認します。

あなたは両方を持っているので、あなたのAddTodoコンポーネントは、最初に推測していたとしてid性質を持っていない./src/actions.jsでアクションの作成者を、使用してインポートされます。

このファイルを削除すると、意図したとおりに動作するはずです。