當調用'this.props.actions.updateComment（event.target.value）'時，爲什麼我會丟失當前的對象狀態？

Question

我試圖實現以下目標：有一個文本字段，並且一旦用戶輸入文本，創建一個對象與文本分配給一個名爲'commentText'，它是位於'評論'數組是在'todos'數組的對象（todo [0]）中。 'commentInput'只是輸入到文本字段中的輸入的臨時存儲，要分配給'todo [0]'對象的'comments'數組的'commentText'。

我通過以下檢索當前狀態對象：

const mapStateToProps=(state, ownProps)=>({ 
    todo:state.todos.filter(todo=>todo.id==ownProps.params.id) 
}); 

，並通過調度和行動：

function mapDispatchToProps(dispatch){ 
    return{ 
actions: bindActionCreators(actions, dispatch) 
} 

所以檢索對象「待辦事項」有一個名爲註釋的數組屬性。我有一個具有一個文本字段：

onChange={this.handleCommentChange.bind(this)} 

其作用：

handleCommentChange(event){ 
    this.props.actions.updateComment(event.target.value) 
    } 

handleCommentChange之前被調用時，對象 '待辦事項[0]' 首先正確地提取：

但是，一旦文本輸入到文本字段中，onChange = {this.handleCommentChange.bind（this）}被調用，突然，'todo [0]'狀態全部丟失（如s hown在 '下一個狀態' 日誌）：

可能是什麼問題？試圖解決它幾個小時，但仍然卡住。任何指導或見解將不勝感激。先謝謝你。

編輯**：

{ 
    this.props.newCommentsArray.map((comment) => { 
     return <Comment key={comment.id} comment={comment} actions={this.props.actions}/> 
    }) 
    } 

EDIT 2 **

case 'ADD_COMMENT': 
    return todos.map(function(todo){ 
//Find the current object to apply the action to 
    if(todo.id === action.id){ 
//Create a new array, with newly assigned object 
     return var newComments = todo.comments.concat({ 
     id: action.id, 
     commentTxt: action.commentTxt 
     }) 
    } 
    //Otherwise return the original array 
    return todo.comments 
    }) 

Answer 1

我會懷疑你的減速機無法正確更新的待辦事項條目。它可能完全取代條目的內容，而不是以某種方式合併傳入值。

編輯：

是啊，看到你的全代碼之後，你的減速是非常錯誤的。下面是當前的代碼：

case 'ADD_COMMENT': 
    return todos.map(function(todo){ 
    if(todo.id === action.id){ 
     return todo.comments = [{ 
     id: action.id, 
     commentTxt: action.commentTxt 
     }, ...todo.comments] 
    } 
    }) 

map()應爲數組中的每一項可以返回一個項目。相反，你只有返回的東西，如果ID匹配，即使如此，你實際上分配todo.comments（導致直接變異），並返回該語句的結果（這可能是undefined？）。

你需要這樣的事，而不是（這可以簡寫，但我故意寫出來長篇澄清發生的事情）：

case 'ADD_COMMENT': 
    return todos.map(function(todo) { 
     if(todo.id !== action.id) { 
      // if the ID doesn't match, just return the existing objecct 
      return todo; 
     } 

     // Otherwise, we need to return an updated value: 

     // Create a new comments array with the new comment at the end. concat() will 
     // You could also do something like [newComment].concat(todo.comments) to produce 
     // a new array with the new comment first depending on how you want it ordered. 
     var newComments = todo.comments.concat({ 
      id : action.id, 
      commentTxt : action.commentTxt 
     }); 

     // Create a new todo object that is a copy of the original, 
     // but with a new value in the "comments" field 
     var newTodo = Object.assign({}, todo, {comments : newComments}); 

     // Now return that instead 
     return newTodo; 
    });