Question

因此在我的reducer中，我有一个名为'todos'的对象数组，而'todos'的对象的状态也是一个对象数组，称为'comments'。在每个'comments'数组中，我想定义一个字符串状态'commentText'，但我似乎无法弄清楚如何这样做。任何帮助将不胜感激。

以下是我想要实现的一个例子：

let todoReducer = function(todos = [], action){
    switch(action.type){
        case 'ADD_TODO':
            return [{
                comments:[{
                    commentText: action.commentText
                }]
            }, ...todos]

        case 'CREATE_COMMENT_ARRAY':
            return [{
                commentText: action.eventValue
            ], ...todos.comments] //Referencing todos.comments as 'comments' array of objects of an object of 'todos' array. Would like to directly update if possible and build up 'comments' array.

       default:
        return todos
    }
}
export default todoReducer

NEW EDIT **：

case 'UPDATE_COMMENT':
  return todos.map(function(todo){
    if(todo.id === action.id){
      //want to add a new a 'comment' object to the todo's 'comments' array
    //Something like the following:
        todo.comments: [{
            commentText: action.commentText
        }, ...todo.comments]
    }
  })

Answer 1

这听起来像是.map() Array方法的一个很好的用例。

假设您的数据如下：

var todos = [
  {
    id: 1,
    title: 'Todo 1 Title',
    body: 'Todo 1 Body',
    date: 1425364758,
    comments: [
      {
        id: 1,
        commentorId: 42069,
        text: 'Todo 1, Comment 1 Text',
        date: 1425364758
      },
      {
        id: 2,
        commentorId: 42069,
        text: 'Todo 1, Comment 2 Text',
        date: 1425364758
      },
      {
        id: 3,
        commentorId: 42069,
        text: 'Todo 1, Comment 3 Text',
        date: 1425364758
      }
    ]
  },
  {
    id: 2,
    title: 'Todo 2 Title',
    body: 'Todo 2 Body',
    date: 1425364758,
    comments: [
      {
        id: 1,
        commentorId: 42069,
        text: 'Todo 2, Comment 1 Text',
        date: 1425364758
      }
    ]
  },
  {
    id: 3,
    title: 'Todo 3 Title',
    body: 'Todo 3 Body',
    date: 1425364758,
    comments: [
      {
        id: 1,
        commentorId: 42069,
        text: 'Todo 3, Comment 1 Text',
        date: 1425364758
      },
      {
        id: 2,
        commentorId: 42069,
        text: 'Todo 3, Comment 2 Text',
        date: 1425364758
      }
    ]
  }
];

更新评论时，您需要传递todoId和commentId，以便了解要查找的内容。添加评论时，您只需传入todoId，以便了解要更新的待办事项：

const todoReducer = (todos = [], action) => {
  switch(action.type) {
    case 'ADD_TODO':
      return [
        action.todo,
        ...todos
      ];
    case 'ADD_COMMENT':
      const { todoId, comment } = action;

      // Map through all the todos. Returns a new array of todos, including the todo with a new comment
      return todos.map(todo => {
        // Look for the todo to add a comment to
        if (todo.id === todoId) {
          // When the todo to update is found, add a new comment to its `comments` array
          todo.comments.push(comment);
        }
        // Return the todo whether it's been updated or not
        return todo;
      });
    case 'UPDATE_COMMENT':
      const { todoId, commentId, commentText } = action;

      // Map through all the todos. Returns a new array of todos, including the todo with the updated comment
      return todos.map(todo => {
        // First find the todo you want
        if (todo.id === todoId) {
          // Then iterate through its comments
          todo.comments.forEach(comment => {
            // Find the comment you want to update
            if (comment.id === commentId) {
              // and update it
              comment.text = commentText;
            }
          });
        }
        // Return the todo whether it's been updated or not
        return todo;
      });
    default:
      return todos;
  }
};
export default todoReducer;

至于您的有效负载，您可以随意制作它们，并且它们将在您的动作创建者中创建。例如，这里是ADD_TODO的一个实现，它为todo提供唯一的ID，为其加上时间戳，并在触发操作之前添加一个空的comments数组：

import uuid from 'node-uuid';
const addTodo = ({title, body}) => {
  const id = uuid.v4();
  const date = new Date().getTime();
  return {
    type: 'ADD_TODO',
    todo: {
      id,
      title,
      body,
      date,
      comments: []
    }
  };
};

您的ADD_COMMENT动作创建者可能看起来像这样：

import uuid from 'node-uuid';
const addComment = ({todoId, commentorId, commentText}) => {
  const id = uuid.v4();
  const date = new Date().getTime();
  return {
    type: 'ADD_COMMENT',
    todoId,
    comment: {
      id,
      commentorId,
      date,
      text: commentText
    }
  };
};

这是未经测试的，但希望能给你一个想法。

如何在reducer（ReactJS + Redux）中定义数组数组中对象的状态？

1 个答案: