React+Express+MySQL中res.json返回重复数组问题求助

原因解析 #

你使用的MySQL客户端库（大概率是mysql2）的query方法，在通过async/await调用时，会返回一个包含两个元素的数组：

• 第一个元素：查询得到的实际数据结果集
• 第二个元素：查询的元数据信息（比如字段类型、影响行数等）

所以直接执行res.json(vehiculos)时，会把结果集和元数据一并返回给前端，导致前端拿到两个数组，调用map遍历自然无法正常渲染。

解决方案 #

后端代码修正 #

直接通过解构赋值获取结果集，或者取数组第一个元素即可：

export const allVehiculos = async (req,res) => {
    try {
        const query= "SELECT `idVehiculos`, `placa`, `codip`, `descp`, `anio`, `clase`, `color`, `motor`, `serie`, `marca` " +
        "FROM vehiculos AS vehiculos " +
        "INNER JOIN marcas as marcas " +
        "on `Vehiculos`.`idMarca` =  `marcas`.`id`"
        // 方式1：解构赋值直接拿到结果集（更推荐）
        const [vehiculos] = await db.query(query)
        res.json(vehiculos)

        // 方式2：取数组第一个元素（你已验证过的有效写法）
        // const vehiculos = await db.query(query)
        // res.json(vehiculos[0])
    } catch (error) {
        res.json({message: error.message})
    }
}

前端代码小优化（可选） #

你的React代码里useState的更新函数命名存在不一致，建议修正以避免后续混淆：

const [vehiculos, setVehiculos] = useState([])
useEffect( () => {
    getVehiculos();
}, [])

// 同时确保getVehiculos函数正确更新状态，示例：
// const getVehiculos = async () => {
//   const response = await fetch('/api/vehiculos')
//   const data = await response.json()
//   setVehiculos(data)
// }

return(
    vehiculos.map((item) => {
        return(
            <tr key={item.idVehiculos} className="table-row row-item">
                <td>{item.placa}</td>
                <td>{item.codip}</td>
                <td>{item.descp}</td>
                <td>{item.anio}</td>
                <td>{item.clase}</td>
                <td>{item.color}</td>
                <td>{item.motor}</td>
                <td>{item.serie}</td>
                <td>{item.marca}</td>
            </tr>
        )})
)

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