React列表key警告及书籍增删404问题求助

一、"Each child in a list should have a unique 'key' prop" 警告问题 #

可能原因 #

• 后端返回的books数组中存在重复id：虽然数据库ID是自增唯一的，但后端查询逻辑可能出错（比如重复查询、JOIN语句导致数据重复），返回了ID重复的书籍数据。
• book.id类型不一致：部分id是数字、部分是字符串，虽然React会将key转为字符串，但如果前端处理数据时意外修改了ID值，可能导致隐性重复。

解决步骤 #

1. 验证前端接收的书籍数据：在组件中添加日志，确认每个book.id的唯一性：

   useEffect(() => {
     console.log('Books data:', books);
   }, [books]);
   

   检查输出的books数组，确认不存在重复ID。
2. 统一key的类型：将book.id转为字符串，避免类型差异引发的潜在问题：

   <div className="book" key={String(book.id)}>
     {/* 书籍内容 */}
   </div>
   

3. 排查后端查询逻辑：如果前端发现重复ID，检查后端SQL语句，比如是否因JOIN操作导致数据重复，或是否错误重复返回了同一条数据。

二、删除/更新时404 Not Found错误问题 #

可能原因 #

• 前后端路径不匹配：前端请求的URL（如/api/books/${id}）与后端路由（如/api/book/${id}）不一致。
• ID类型不匹配：数据库ID是数字类型，但前端传递的是字符串，后端未做类型转换，导致SQL查询无法匹配数据。
• 后端SQL逻辑错误：字段名写错、参数传递错误，导致查询不到对应书籍，返回404。

解决步骤 #

1. 检查前端请求URL：在handleDelete中打印请求ID和URL，确认格式正确：

   const handleDelete = async (id) => {
     console.log('Deleting ID:', id);
     const response = await fetch(`/api/books/${id}`, { method: 'DELETE' });
     if (!response.ok) console.error('Request failed:', response.status);
   };
   

2. 修正后端路由与类型转换：确保路由路径与前端一致，并将URL参数转为数字：

   app.delete('/api/books/:id', async (req, res) => {
     const bookId = parseInt(req.params.id); // 字符串转数字匹配数据库类型
     // 执行删除逻辑
   });
   

3. 检查后端SQL语句：确认删除/更新的查询条件正确，比如：

   const [result] = await db.query('DELETE FROM books WHERE id = ?', [bookId]);
   if (result.affectedRows === 0) {
     return res.status(404).json({ message: 'Book not found' });
   }
   

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