React中useState仅获取最后一个值的问题排查

你遇到的核心问题是当前pasajero是单个对象状态，在for循环中每次调用setPasajero都会覆盖之前的对象，循环结束后自然只保留最后一位乘客的数据。要存储所有乘客信息，需要把pasajero改成数组类型的状态。

步骤1：修改状态定义 #

将pasajero的初始状态从空对象{}改为空数组[]：

const [pasajero, setPasajero] = useState([])

步骤2：重构useEffect逻辑 #

不需要用for循环多次调用setPasajero，直接通过数组映射生成完整的乘客数组，再一次性更新状态：

useEffect(() => {
    // 假设datos.nombres、datos.apellidos、datos.DNI的长度一致
    const pasajerosArray = datos.nombres.map((nombre, index) => ({
        nombre,
        apellido: datos.apellidos[index],
        DNI: datos.DNI[index]
    }));
    setPasajero(pasajerosArray);
}, [datos]); // 依赖项加上datos，确保数据变化时重新生成

如果坚持用for循环，也可以先创建临时数组，循环填充后再更新状态：

useEffect(() => {
    const tempPasajeros = [];
    for (let i = 0; i < datos.nombres.length; i++) {
        tempPasajeros.push({
            nombre: datos.nombres[i],
            apellido: datos.apellidos[i],
            DNI: datos.DNI[i]
        });
    }
    setPasajero(tempPasajeros);
}, [datos]);

步骤3：遍历使用数据 #

现在pasajero是包含所有乘客的数组，你可以用map遍历渲染或处理数据：

// 示例：渲染所有乘客
return (
    <div>
        {pasajero.map((p, index) => (
            <div key={index}>
                <p>姓名：{p.nombre} {p.apellido}</p>
                <p>ID：{p.DNI}</p>
            </div>
        ))}
    </div>
);

• React的状态更新是异步的，多次连续调用setPasajero会被合并，最终只生效最后一次更新，这也是你之前只拿到最后一位乘客的原因之一。
• 状态依赖项要加上datos，确保当datos变化时，能重新生成乘客数组。

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