Estoy extrayendo a un usuario por ID y parece que al final se extrae de mi base de datos, ya que lo registra todo en la consola, pero el estado no actualiza las variables en absoluto. Siento que es algo pequeño y estúpido que me impide que solo el usuario 2 muestre FirstName LastName - CollectorID | FinanceCompany junto a los 2 bajo el encabezado Actualizar recopilador.
import React, { useState, useEffect } from "react"; import axios from "axios"; import { useParams } from "react-router-dom"; const UpdateUser = () => { const { CollectorID } = useParams(); const [user, setUser] = useState({ FirstName: '', LastName: '', CollectorCode: '', FinanceCompany: '' }); const { FirstName, LastName, CollectorCode, FinanceCompany } = user; useEffect(() => { loadUser(); }, []);// eslint-disable-line react-hooks/exhaustive-deps const loadUser = async () => { const result = await axios.get(`http://localhost:5000/getCollectors/${CollectorID}`); setUser(result.data); }; console.log(user); return ( <div className="previewWrapper"> <h1>Update Collectors</h1> <div className="wrapper"> {<div><p>{CollectorID} | {FirstName} {LastName} - {CollectorCode} | {FinanceCompany}</p></div>} </div> </div> ); } export default UpdateUser;Espera un objeto en su código, sin embargo, su respuesta API es una matriz de objetos. Es claramente visible desde sus registros.
Para verificarlo puedes simplemente probar
setUser(result.data[0]); // instead of setUser(result.data); Esta línea a continuación, siempre daría como resultado valores undefined . Dado que está asignando una matriz, su variable desestructurada de esta manera no funcionaría
const { FirstName, LastName, CollectorCode, FinanceCompany } = user;.
Es posible que desee cambiar la lógica de cómo almacenar los datos del usuario, ya que la respuesta de la API y el estado actual realmente no coinciden.