React中.map内收藏按钮无法修改MySQL布尔值求助

前端核心问题修复 #

1. 传递当前循环项的ID到点击事件 #

原代码中handleClick尝试获取cnuevos.id，但cnuevos是数组，无法拿到单个项的ID。需要将循环中的cnuevo作为参数传入点击函数：

// 修改点击处理函数，接收当前项参数
async function handleClick(cnuevo) {
  try {
    await axios.post('http://localhost:3001/api/oportunidades', {
      id: cnuevo.id, // 使用当前项的ID
      ofertas: true,
    });
    // 更新本地状态，同步UI显示
    setCnuevos(prevList => prevList.map(item => 
      item.id === cnuevo.id ? {...item, ofertas: true} : item
    ));
  } catch (err) {
    console.error('修改失败:', err);
  }
}

// 在map循环中传递当前项给点击函数
<button onClick={() => handleClick(cnuevo)}>Marcar como oferta</button>

2. 增加错误捕获逻辑 #

通过try/catch捕获请求异常，方便排查请求失败的原因。

后端代码优化 #

1. 检查更新结果并返回明确响应 #

Sequelize的update方法会返回被修改的行数，可据此判断操作是否有效：

oportunidadesRouter.post("/", async (req, res) => {
  const { id, ofertas } = req.body;

  try {
    const [updatedCount] = await Oferta.update(
      { ofertas },
      { where: { id } }
    );

    if (updatedCount === 0) {
      return res.status(404).json({ success: false, msg: "未找到对应记录" });
    }
    res.json({ success: true, msg: "修改成功" });
  } catch (err) {
    console.error("数据库更新错误:", err);
    res.status(500).json({ success: false, msg: "服务器内部错误" });
  }
});

2. 验证模型与数据库表的一致性 #

确保Oferta模型的ofertas字段定义和MySQL表中的字段类型匹配（Sequelize的BOOLEAN会自动映射到MySQL的TINYINT(1)）。

额外排查点 #

• 确认CORS配置：后端已引入cors中间件，确保跨域请求正常。
• 检查请求状态：打开浏览器开发者工具的Network面板，查看POST请求的参数、响应状态及内容。
• 验证数据库连接：确认Sequelize能正常连接MySQL，且cnuis表存在、id为主键。

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