使用Mongoose、Node.js、React.js如何同步更新User与Post模型的username？

你遇到的问题由3处核心错误导致，按以下步骤修改即可实现用户名同步效果：

1. 修正PostSchema字段命名（强烈建议，避免逻辑混淆） #

你当前在PostSchema中将存储用户ID的关联字段命名为username，和User模型的用户名字段完全重名，会导致后续逻辑处理极度容易混乱，建议修改为userId：

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const PostSchema = new mongoose.Schema({
  title:{
    type: String,
    required: true,
    unique: true
  },
  description:{
    type: String,
    required: true, 
  },
  postPhoto:{
    type: String,
    required:false,
  },
  // 把原来的username字段改名为userId，存储关联的用户ID
  userId:{
    type: Schema.Types.ObjectId, 
    ref: 'User',
    required: true,
  },
  categories:{
    type: Array,
    required: false
  },
}, {timestamps: true});

module.exports = mongoose.model("Post", PostSchema); 

如果暂时不想改字段名，可跳过这步，后续对应修改关联字段名即可。

2. 修正拉取帖子接口的populate语法 #

你之前的populate是单独调用的，没有绑定到Mongoose查询实例上，同时populate参数里的字段名多了一个前置空格，完全匹配不到Post的字段，所以会报错拉取不到数据。
修改后的接口代码如下：

// Get Post
router.get("/:id", async(req, res)=>{
  try{
    // 把populate链式调用到查询方法后，第一个参数是Post里存用户ID的关联字段名
    // 如果你跳过了第一步没改字段名，这里就写成.populate('username', 'username')
    const post = await Post.findById(req.params.id).populate('userId', 'username');
    res.status(200).json(post)
  }catch(err){
    res.status(500).json(err)
  }
})

populate执行后，关联字段会自动替换为User模型的对应数据，第二个参数指定只返回User的username字段，避免返回敏感的密码等信息。

3. 修正前端取值逻辑 #

populate执行后，关联字段返回的是用户对象，需要从对象中取username属性：

import { useLocation } from 'react-router';
// 注意要导入useState，你原来的代码漏了
import { useState, useEffect } from 'react';
import axios from 'axios';

export default function SinglePost() {
  const location = useLocation()
  const path = location.pathname.split("/")[2];
  const [post, setPost] = useState({});
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("");
  const [postUser, setPostUser] = useState(""); // 你原来漏了这个状态的定义
  const [updateMode, setUpdateMode] = useState(false)

  useEffect(() => {
    const getPost = async () => {
      try{
        const response = await axios.get("/posts/"+path )
        setPost(response.data);
        setTitle(response.data.title);
        setDescription(response.data.description);
        // 如果你跳过了第一步没改字段名，这里就写成 response.data.username.username
        setPostUser(response.data.userId.username)
      }catch(err){
        console.log(err)
      }
    };       
    getPost()
  }, [path]);

  // 剩余的组件逻辑...
}

可选优化方案（无需每次populate） #

如果你的场景中不需要关联用户的其他信息，只需要展示用户名，也可以在用户修改用户名的接口中，批量同步更新所有该用户的帖子冗余用户名：

1. 先在PostSchema中保留username字段存储用户名字符串，同时保留userId关联字段
2. 用户更新用户名的接口中，更新User模型后新增批量更新逻辑：

await Post.updateMany({ userId: 要修改的用户ID }, { $set: { username: 新用户名 } })

该方案无需每次拉取帖子都执行populate，查询性能更高。

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