javascript - 为什么调用 'this.props.actions.updateComment(event.target.value)' 时会丢失当前对象状态？

Question

我试图实现以下目标:有一个文本字段，一旦用户输入文本，就会创建一个对象，并将该文本分配给名为“commentText”的状态属性，该属性位于“comments”数组内位于 '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)
}

因此，检索到的对象“todo”有一个名为comments 的数组属性。我有一个文本字段，其中包含:

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

它的作用是:

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

在调用handleCommentChange之前，首先正确获取对象'todo[0]':

但是一旦在文本字段中输入文本，就会调用 onChange={this.handleCommentChange.bind(this)} ，突然间，'todo[0]' 状态全部丢失(如图所示) “下一个状态”日志):

可能是什么问题？尝试解决这个问题几个小时，但仍然卡住了。任何指导或见解将不胜感激。预先感谢您。

编辑**:

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

编辑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

我怀疑您的 reducer 没有正确更新待办事项条目。它可能会完全替换条目的内容，而不是以某种方式合并传入的值。

编辑:

是的，在看到你的完整代码后，你的 reducer 有很大的错误。这是当前代码:

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 (导致直接突变)并返回该语句的结果(可能是未定义？)。

你需要这样的东西(可以写得更短，但我故意写得很长，以澄清发生了什么):

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