React+Firebase项目如何在Redux state中动态生成评论对象顺序键名

动态生成顺序键的实现方法 #

你只需要先计算当前comments_text里已存在的最大数字键，加1后作为新的键名即可，利用JS对象的动态属性名语法（用方括号包裹变量作为键）替换硬编码的comment即可，修改后的Redux reducer代码如下：

case HOLD_COMMENT_POST:
{
  const { postUserId, postId, commenter_comment, commenter_handle, commenter_uid, comment_key } = action.payload;

  return state.map((user) => {
    if (user.uid === postUserId) {
      return {
        ...user,
        posts: user.posts.map(post => {
          if (post.key === postId) {
            // 计算新的顺序键
            let newCommentKey = '0';
            if (post.comments_text) {
              // 提取所有数字键，过滤非法值
              const numKeys = Object.keys(post.comments_text)
                .map(key => parseInt(key, 10))
                .filter(key => !isNaN(key));
              // 取最大键+1作为新键
              const maxKey = numKeys.length ? Math.max(...numKeys) : -1;
              newCommentKey = String(maxKey + 1);
            }

            return {
              ...post,
              // 用动态键替换硬编码的comment
              comments_text: post.comments_text ? 
                {...post.comments_text, [newCommentKey]: {commenter_comment, commenter_handle, commenter_uid, key: comment_key}} 
                : {[newCommentKey]: {comment: commenter_comment, handle: commenter_handle, uid: commenter_uid, key: comment_key}}
            };
          } else {
            return post;
          }
        })
      }
    }
    else {
      return user;
    }
  })
}

能不能保留现有硬编码写法？ #

绝对不建议保留，现有写法存在隐藏bug：你在不刷新页面的前提下连续新增多条评论时，所有新评论都会覆盖同一个comment键的内容，只会保留最后一条新增的评论，只是你现在每次刷新后Firebase会重置键名，才没暴露问题而已，实际生产环境用户不会每加一条评论就刷新页面，必然会触发这个bug。

额外注意 #

如果你用的是Firebase Realtime Database，顺序数字键在多用户并发提交评论时容易出现键冲突，有条件的话更建议用Firebase自带的push()方法生成唯一键，不过如果你需要和现有刷新后的数字键逻辑保持一致，用上面的方案就可以满足需求。

内容的提问来源于stack exchange，提问作者Alex