고유 한 "키"오류 응답

Question

React의 ToDo 목록에 대한 튜토리얼을 통해 다음 오류가 발생했습니다. 나는 상당한 시간을 보냈으며 실수를 찾을 수 없습니다. 오류 및 구성 요소의 코드와이 (문제는이 커밋에 나타납니다) 코스의 repo에 대한 코드입니다 :

https://github.com/andrewjmead/react-course-todo-app/commit/0521f151705f78cb9f8d69262eb093f1431cb9ca

어떤 도움이 많이 감사합니다.

경고 : 배열이나 반복기의 각 하위에는 고유 한 "키"소품이 있어야합니다. TodoList의 렌더링 방법을 확인하십시오. 자세한 정보는 fb.me/react-warning-keys를 참조하십시오. I는 todo.id 따라서 undefined 고유하지 내기

var uuid = require('uuid'); 
var moment = require('moment'); 

export var searchTextReducer = (state = '', action) => { 
    switch (action.type) { 
     case 'SET_SEARCH_TEXT': 
      return action.searchText; 
     default: 
      return state; 
    }; 
}; 

export var showCompletedReducer = (state = false, action) => { 
    switch (action.type) { 
     case 'TOGGLE_SHOW_COMPLETED': 
      return !state; 
     default: 
      return state; 
    };  
}; 

export var todosReducer = (state = [], action) => { 
    switch(action.type) { 
     case 'ADD_TODO': 
      return [ 
       ...state, 
       { 
        text: action.text, 
        id: uuid(), 
        completed: false, 
        createdAt: moment().unix(), 
        completedAt: undefined     
       } 
      ]; 
     case 'TOGGLE_TODO': 
      return state.map((todo) => { 
       if(todo.id === action.id) { 
        var nextCompleted = !todo.completed; 

        return { 
         ...todo, 
         completed: nextCompleted, 
         completedAt: nextCompleted ? moment().unix() : undefined 
        }; 
       } else { 
        return todo; 
       } 
      }); 
     case 'ADD_TODOS': 
      return [ 
       ...state, 
       ...action.todos 
      ]; 
     default: 
      return state; 
    } 
}; 


Webpack: 

var webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    'script!jquery/dist/jquery.min.js', 
    'script!foundation-sites/dist/js/foundation.min.js', 
    './app/app.jsx' 
    ], 
    externals: { 
     jquery: 'jQuery' 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      '$': 'jquery', 
      'jQuery': 'jquery' 
     }) 
    ], 
    output: { 
    path: __dirname, 
    filename: './public/bundle.js' 
    }, 
    resolve: { 
    root: __dirname, 
    modulesDirectories: [ 
     'node_modules', 
     './app/components', 
     './app/api' 
    ], 
    alias: { 
     applicationStyles: 'app/styles/app.scss', 
     actions: 'app/actions/actions.jsx', 
     reducers: 'app/reducers/reducers.jsx', 
     configureStore: 'app/store/configureStore.jsx' 
    }, 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015'] 
     }, 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/ 
     } 
    ] 
    }, 
    devtool: 'cheap-module-eval-source-map' 
}; 

Answer 1

노드 UUID가되지 않습니다, 여기에서 확인 : 도움이된다면 https://www.npmjs.com/package/uuid가

당신은 UUID를 설치하여 package.json를 업데이트하고 볼 수 있습니다

NPM 설치

그냥 잊지 마세요

UUID 업데이트하려면 var uuid = require ('node-uuid'); var uuid = require ('uuid'); 당신의 다른 파일에서.

P. 웹팩을 실행할 때 터미널에 오류가 있습니까?

Answer 2

:

또한 경우에 확산 연산자,

return { 
...todo, // here 
completed: nextCompleted, 
completedAt: nextCompleted ? moment().unix() : undefined 
}; 

var React = require('react'); 
var { connect } = require('react-redux'); 
import Todo from 'Todo'; 
var TodoAPI = require('TodoAPI'); 

export var TodoList = React.createClass ({ 
    render: function() { 
     var { todos, showCompleted, searchText } = this.props; 
     var renderTodos =() => { 
      if(todos.length === 0) { 
       return (
        <p className="container__message">No tasks</p> 
       ); 
      } 
      return TodoAPI.filterTodos(todos, showCompleted, searchText).map((todo) => { 
       return (
        //add unique key prop to keep track of individual components 
        <Todo key={todo.id} {...todo} /> 
       ); 
      }); 
     }; 
     return (
      <div> 
       {renderTodos()} 
      </div> 
     ); 
    } 
}); 

export default connect(
    (state) => { 
     return state; 
    } 
)(TodoList); 

기어 TOGGLE_TODO

단말에 에러가있다. 귀하의 예에 todos을 포함시킬 수 있습니까?

당신은 당신의 map 기능에 index PARAM를 추가 할 수 있습니다

Answer 3

는 다음 Todo 구성 요소에 해당 인덱스를 전달합니다

export var TodoList = React.createClass ({ 
    render: function() { 
     var { todos, showCompleted, searchText } = this.props; 
     var renderTodos =() => { 
      if(todos.length === 0) { 
       return (
        <p className="container__message">No tasks</p> 
       ); 
      } 
      return TodoAPI.filterTodos(todos, showCompleted, searchText).map((todo, index) => { // here <==== 
       return (
        //add unique key prop to keep track of individual components 
        <Todo key={`key-${index}`} {...todo} /> 
       ); 
      }); 
     }; 
     return (
      <div> 
       {renderTodos()} 
      </div> 
     ); 
    } 
}); 

Answer 4

에서 반응, 여러 동일한 구성 요소를 렌더링 할 때 (귀하의 경우, 수행 할 작업을) 당신이 필요로하는 React가 가상 돔에서 어떻게 다루어 지는지 알아야하기 때문에 각 키에 고유 한 키를 추가해야합니다.

이 해결하기 위해 여러 가지 수행 할 수 있습니다 루프 마감은 다음 설정 때마다, for 루프에서

1. 를 인덱스 변수를 만들고 1을 증가를 각 렌더링 구성 요소에 대한 키로 .

2. API에서 할일을 가져 오는 경우 각 할일에 ID를 설정하고이를 구성 요소 키로 사용하십시오.

3. 난수 생성기를 사용하여 각각의 할일에 고유 한 키를 설정하십시오.

가장 좋은 방법은 # 2, # 3입니다, 당신의 경우에 당신이 # 2 (할 일 ID로 키를 설정)을하려고 노력하고 있음을 볼 수 있지만 나는 그것이 정의되지 않은 생각, 그것을 확인.

다른 해결책은 각 렌더링 된 구성 요소/할일에 uuid을 사용하는 것입니다.

이렇게하려면 node-uuid을 설치할 수 있습니다.

실행 : npm i --save node-uuid

그런 다음 파일에서 가져 오기를 수행

return TodoAPI.filterTodos(todos, showCompleted, searchText).map((todo) => { 
    return (
    //add unique key prop to keep track of individual components 
    <Todo key={uuid()} {...todo} /> 
); 
}); 

을 그리고 당신은 갈 수 있어요 : import uuid from 'node-uuid' 또는

const uuid = require('node-uuid') 지금 이렇게 될 코드를 변경 .