2017-01-30 74 views
0

下面的代码按预期工作,除非单击可点击列表项目。所以,当我们添加项目时,映射的id是很好的,当单击<li>时是undefined。 请问,这个非常基础的代码有什么问题?Redux:无法读取未定义的属性“ID”

let nextId = 0; 
export default React.createClass({ 
    addItem(){ 
     let text = ReactDOM.findDOMNode(this.refs.doos).value; 
     store.dispatch({ 
      type: 'ADD_TODO', 
      text, 
      id: nextId++ 
     }) 
     ReactDOM.findDOMNode(this.refs.doos).value = ''; 
    }, 
    render(){ 
     return <div> 
      <p>Toddos!</p> 
      <input ref="doos" type="text"/> 
      <button onClick={this.addItem}>Add Item</button> 
      <ul> 
      {this.props.todos.map(todo => 
       <li key={todo.id} // Can not read property when clicked! 
       onClick={() => { 
        store.dispatch({ 
         type: 'TOGGLE_TODO', 
         id: todo.id 
        }); 
       }} 
       style={{ 
         textDecoration: todo.completed ? 
         'line-through' : 'none', 
         cursor: 'pointer' 
        }}> 
         {todo.text} 
       </li> 
      )} 
      </ul> 
     </div> 
    } 
}); 

回答

0

它可能与您的减速器不返回状态有关。在映射到所有待办事项的Reducer中,检查它是否返回每个待办事项的状态。

什么可能是一个可能的问题是,您在您的todosReducer的map函数中使用大括号。但是,在ES6中使用大括号表示您应该明确地返回值。省略大括号会自动返回值。

在你todosReducer:

case 'TOGGLE_TODO': 

    return state.map(todo => { 
    todoReducer(todo, action) // You should use return here 
    }); 

或者:

case 'TOGGLE_TODO': 

    return state.map(todo => 
    todoReducer(todo, action) // Omitted curly brackets 
); 
+0

'情况 'TOGGLE_TODO': 回报state.map(T =>待办事项(T,动作));' 代码如下像这样...... –

+0

你能在你的todos减速器中注销你的状态并告诉我说了什么吗? –

+0

请看看这个工作示例http://redux.skepton.ru/和Gitub回购 –