如何通过一个表单将数据存入两个MySQL数据表？

一、先理清核心逻辑 #

你之前用map是用来渲染页面数据的，和提交数据到数据库完全是两码事。要把表单数据同时存到两个表，核心是后端用事务处理双表插入+前端一次提交请求，而不是在前端折腾多个map。另外你渲染时想显示另一张表的价格，需要把两个表的数据关联起来。

二、渲染时关联两个表的数据 #

你现在有books和prices两个状态数组，要显示对应书籍的价格，可以在遍历books时用find方法匹配对应id的价格记录：

{books.map((book) => {
  // 根据书籍id找到对应的价格数据
  const matchedPrice = prices.find(price => price.bookId === book.id);
  return (
    <div key={book.id} className="book">
      <img src={book.cover} alt="" />
      <h2>{book.title}</h2>
      <p>{book.desc}</p>
      {/* 有匹配到价格就显示，没匹配到显示默认值 */}
      <span>${matchedPrice ? matchedPrice.price : '0.00'}</span>
      <button className="delete" onClick={() => handleDelete(book.id)}>删除</button>
      <button className="update">
        <Link
          to={`/update/${book.id}`}
          style={{ color: "inherit", textDecoration: "none" }}
        >
          更新
        </Link>
      </button>
    </div>
  )
})}

更省心的方式是让后端直接返回关联好的数据，用SQL的JOIN查询把两个表的数据合并：

SELECT b.*, p.price FROM books b LEFT JOIN prices p ON b.id = p.bookId

前端只需要一个状态数组接收数据，直接用book.price就能显示价格，不用自己做匹配。

三、表单数据存入两个MySQL表的正确步骤 #

1. 后端用事务处理（关键） #

必须在后端接口里用数据库事务，确保两个表的插入要么都成功，要么都失败，避免数据不一致。以下是Node.js + Express的示例：

app.post('/api/save-book', async (req, res) => {
  const { title, desc, cover, price } = req.body;
  try {
    // 开启事务
    await db.beginTransaction();
    // 先插入books表，获取自动生成的书籍id
    const [bookResult] = await db.query(
      'INSERT INTO books (title, `desc`, cover) VALUES (?, ?, ?)', 
      [title, desc, cover]
    );
    const bookId = bookResult.insertId;
    // 再插入prices表，关联刚才的书籍id
    await db.query(
      'INSERT INTO prices (bookId, price) VALUES (?, ?)', 
      [bookId, price]
    );
    // 提交事务
    await db.commit();
    res.status(201).json({ message: '数据保存成功' });
  } catch (err) {
    // 出错就回滚事务
    await db.rollback();
    res.status(500).json({ error: '保存失败，请重试' });
  }
});

2. 前端提交表单 #

在React的表单提交函数里，收集所有输入数据，一次请求发给后端接口即可：

const handleSubmit = async (e) => {
  e.preventDefault();
  // 收集表单输入的数据
  const formData = {
    title: titleValue,
    desc: descValue,
    cover: coverValue,
    price: priceValue
  };
  try {
    await fetch('/api/save-book', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });
    // 提交成功后刷新列表数据
    fetchBooksData();
  } catch (err) {
    console.error('提交失败', err);
  }
};

四、为什么你之前用&&连接两个map不行？ #

map是用来生成React页面元素的，&&只是逻辑判断符，和提交数据到数据库的逻辑完全不相关。提交数据到数据库是通过HTTP请求调用后端接口，和前端渲染的map没有关系。

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