React+MongoDB CRUD应用更新数据问题：无法正确传递更新值

前端代码问题及修正 #

1. 状态变量名不匹配：输入框绑定的状态是newFoodName，但请求里传的是未定义的foodName，导致后端接收不到更新值。
2. 多余且错误的参数传递：请求体里的di: id拼写错误且完全冗余，后端已经通过URL参数:id获取目标ID。

修正后的前端更新函数：

function updateInput(id) {
    axios.patch(`http://localhost:3001/update/${id}`, {
        foodName: newFoodName // 匹配状态变量名，同时对应数据库中的字段名
    }).then(r => {
        console.log(r)
    })
    console.log(newFoodName)
}

同时确认组件内已正确声明状态：

const [newFoodName, setNewFoodName] = useState('');

后端代码问题及修正 #

1. 更新字段不明确：直接将整个请求体传给$set，如果前端传递的字段名和数据库原有字段名不一致，会导致数据库新增字段而非更新原有字段。
2. 注释变量名错误：注释里的updates.newFoodName实际变量是updatedFood，属于笔误。

修正后的后端代码：

// 确保已引入ObjectId
const { ObjectId } = require('mongodb');

app.patch('/update/:id', (req,res) =>{
  const { foodName } = req.body; // 解构出需要更新的字段

  if(ObjectId.isValid(req.params.id)){
      db.collection('foods')
          .updateOne(
              {_id: ObjectId(req.params.id)}, 
              {$set: { foodName: foodName }} // 明确指定要更新的数据库字段和对应值
          )
          .then(result =>{
              res.status(200).json(result)
          })
          .catch(err =>{
              res.status(500).json({error: "Unable to update item"})
          })
  }else{
      res.status(500).json({err: "Cannot update request"})
  }
})

额外排查步骤 #

• 在后端添加console.log(req.body)，确认前端传递的更新值是否正确接收
• 检查数据库集合foods中的字段名是否为foodName，如果不是，同步修改前后端对应的字段名

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