React全栈水果库存系统修改state并同步MongoDB问题咨询

你目前遇到的state不生效、数据不同步到数据库的问题主要来自前端FruitTable组件的逻辑错误，按以下步骤修改即可正常运行：

1. 现有逻辑的问题 #

• 你写的handleClick方法完全不符合修改需求：直接把fruits数组整个赋值为this.state.fruits[1] +1，相当于把存储水果列表的数组改成了单个数字，当然渲染会出错
• 点击按钮没有传递当前操作的水果ID、对应数组索引，也没有区分是加库存还是减库存
• 没有调用后端提供的/fruits/update/:id更新接口，修改后自然不会同步到数据库
• 存在低级拼写错误：import Reac少了t，应为import React

2. 前端代码修改（FruitTable组件） #

2.1 替换handleClick方法 #

// 接收三个参数：水果id、数组索引、操作类型（add加库存/remove减库存）
handleStockChange = (fruitId, index, type) => {
  // 先复制原数组，避免直接修改state
  const newFruits = [...this.state.fruits];
  // 计算新库存，减库存时最小为0避免负数
  const newStock = type === 'add' ? newFruits[index].stock + 1 : Math.max(0, newFruits[index].stock - 1);
  // 更新对应水果的库存数值
  newFruits[index].stock = newStock;

  // 调用后端更新接口同步数据库
  axios.put(`http://localhost:5000/fruits/update/${fruitId}`, {
    stock: newStock
  })
  .then(res => {
    // 接口调用成功再更新state，保证前后端数据完全一致
    this.setState({
      fruits: newFruits
    });
  })
  .catch(err => {
    console.log("更新库存失败：", err);
  })
}

2.2 修改按钮绑定的点击事件 #

把render方法里的两个按钮改成如下写法，传递对应参数：

<Button className="btn btn-primary btn-sm"
  onClick={() => this.handleStockChange(fruit._id, index, 'add')}
>Add</Button>{' '}
<Button className="btn btn-danger btn-sm"
  onClick={() => this.handleStockChange(fruit._id, index, 'remove')}
>Remove</Button> 

3. 后端可选优化（update路由） #

建议修改update路由返回更新后的文档数据，方便前端校验数据一致性：

router.route('/update/:id').put((req, res, next) => {
    Fruit.findByIdAndUpdate(req.params.id, {
        $set: req.body
    }, { new: true }) // 加此参数会返回更新后的文档，而非更新前的旧数据
    .then(updatedFruit => res.json(updatedFruit))
    .catch(err => {
        console.log(err)
        next(err)
    })
})

修改完成后即可实现点击按钮增减库存，同时同步更新数据库和前端页面渲染。

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