UseState получает только последнее значение
Я изучаю реакцию JS, и в этом случае я пытаюсь назначить пассажиров переменной, чтобы позже я мог зациклить их имя, идентификатор..
Я получаю данные из formdata из другого файла: -Имя -Имя -ИДЕНТИФИКАТОР
Я получаю данные из переменной «datos», поэтому, если в моем цикле for я получаю datos.nombre правильным способом, но при консольной регистрации pasajero регистрируется только последний человек.
const { state } = useLocation();
const [datos] = useState(state);
const [pasajero, setPasajero] = useState({})
useEffect(() => {
for (let i = 0; i < datos.length; i++) {
setPasajero((prev) => ({
...prev,
nombre: datos.nombres[i],
apellido: datos.apellidos[i],
DNI: datos.DNI[i],
}));
}
},[]);
console.info(pasajero)
в моем цикле for я пытался назначить пассажира, но получаю последнее значение, когда хочу получить каждого человека в этом цикле for
Почему useState [datos] — это состояние useLocation?
Я использую useLocation, потому что собираю данные, переданные из другого компонента: navigate('/datos', { state: { nombres: nombres, apellidos: apellidos, DNI: DNI, length: nombres.length, precio: precio } } `
Я получил это сейчас! удалил useEffect, создал пустой массив и поместил данные внутрь этого пустого массива, используя имеющийся у меня цикл for вместо использования useState: D Извините, это немного сбивает с толку.
Ответы 2
Изменил его, создав пустой массив, а затем отправив данные во время перебора моих данных с помощью цикла for. Он работает для того, для чего я этого хотел (отображение информации о пассажире) для оплаты (которой явно не существует в этом проекте :D)
const { state } = useLocation();
const datos = state;
const pasajeros = [];
for (let i = 0; i < datos.length; i++) {
pasajeros.push({ nombre: datos.nombres[i], apellidos: datos.apellidos[i], DNI: datos.DNI[i] })
}
console.info(pasajeros)
импортировать {useState} из «реагировать»; импортировать {useLocation} из 'реагировать-маршрутизатор-дом'; const MyComponent = () => {const {state} = useLocation(); const [датос] = useState (состояние); const pasajeros = datos.map((_, index) => ({ nombre: datos.nombres[индекс], apellidos: datos.apellidos[индекс], DNI: datos.DNI[индекс], })); console.info(пасахеро); return ( <div> {/* Отобразите здесь данные о пасахеро */} </div> ); } экспортировать MyComponent по умолчанию;
Этот подход проще и позволяет избежать ненужной сложности управления состоянием, когда данные статичны и получены непосредственно из реквизита или состояния местоположения.
import React from 'react';
import { useLocation } from 'react-router-dom';
const YourComponent = () => {
const { state } = useLocation();
const datos = state;
const pasajeros = datos.nombres.map((_, index) => ({
nombre: datos.nombres[index],
apellido: datos.apellidos[index],
DNI: datos.DNI[index],
}));
console.info(pasajeros);
return (
<div>
{pasajeros.map((pasajero, index) => (
<div key = {index}>
<p>Nombre: {pasajero.nombre}</p>
<p>Apellido: {pasajero.apellido}</p>
<p>DNI: {pasajero.DNI}</p>
</div>
))}
</div>
);
};
export default YourComponent;
Здесь нет необходимости использовать состояние и эффект.
пожалуйста, проверьте еще раз
«Этот подход проще» — это субъективно, если вы не можете указать, насколько он проще.
Трудно понять, насколько «проще» в 4 раза больше строк кода.
pasajeroсостоянию нравятся производные данные, оно не должно быть состоянием и вам не нужен эффект, см. response.dev/learn/…