Cómo imprimir datos json api en reactjs

Estoy obteniendo detalles de la API json a través de la solicitud GET e intentando imprimirlos. Obteniendo un error:

El error en la consola es un error de referencia no detectado: todos los usuarios no están definidos

    const Dashboard = ({status, juser}) => {
const [allUsers, setAllUsers] = React.useState([]);
const id = juser.actable_id;
console.log(id); //getting id here as 1
const getAllusers = () => {
    axios
        .get(`http://localhost:3001/user/${id}`, { withCredentials: true })
        .then((response) => {
           console.log(response.data);
            setAllUsers(response.data);
        })
        .catch((error) => {
            console.log(" error", error);
        });
};

  React.useEffect(() => {
    getAllusers();
  }, []);

{allUsers.map((job_seeker, index) => {
    return (
        <div>
            <p>{job_seeker.name}</p>
        </div>
    );
})}
}

export default Dashboard;

Soy nuevo en reaccionar. Cualquier ayuda es apreciada.

1

Creo que realmente necesitas leer esto con atención. Tu función de configuración es allUsers y estás intentando usarla como una variable.

 necesita_saber_ahora

28 de marzo de 2021 a las 12:51

------------------------------------

const [state, setState] = React.useState([]);

el estado es donde se encuentran sus datos y setState es la función para restablecer el estado desde cualquier lugar,

Así que en tu código,

const [jobseekers, allUsers] = React.useState([]); // change string to array

jobseekers es la variable donde se encuentran sus datos y allUsers es la función para almacenar datos en estado.

establecer los datos al estado usando la función allUsers,

const getAllusers = () => {
    axios
        .get(`http://localhost:3001/user/${id}`, { withCredentials: true })
        .then((response) => {
            allUsers(response.data);
        })
        .catch((error) => {
            console.log(" error", error);
        });
};

y mapa de solicitantes de empleo

{jobseekers.map((job_seeker, index) => {
    return (
        <div>
            <p>{job_seeker.name}</p>
        </div>
    );
})}

También sugeriría cambiar el nombre de su estado y establecerState como,

const [allUsers, setAllUsers] = React.useState([]);

4

EsoGracias @Mohiuddin Khan, pero aparece un error como este "Declaración duplicada "todos los usuarios" " después de agregar esta constante [allUsers, setAllUsers] = React.useState([]);

-SreRoR

28/03/2021 a las 13:14

1

Debes eliminar el gancho inicial que usaste const [jobseekers, allUsers] = React.useState('')

 necesita_saber_ahora

28/03/2021 a las 13:26

@Mohiuddin Khan muchas gracias por ayudarme. muchas gracias por compartir algunas lecturas relacionadas con esto. i. Actualicé mi respuesta en función de sus correcciones.

-SreRoR

28/03/2021 a las 19:35

@SreRoR me alegra poder ayudar :)

- Mohiuddin Khan

29 de marzo de 2021 a las 7:47

------------------------------------

No pasaste el valor de respuesta a todos los usuarios, sino que simplemente creaste una nueva variable. Así que cambia

   const allUsers = response.data;

a:

   allUsers(response.data)

Además, también puedes mejorar la forma en que has utilizado useState. Lo ha inicializado como una cadena vacía mientras que probablemente almacenará una matriz de respuesta en buscadores de empleo. Entonces, inicialízalo como una matriz vacía.

const [jobseekers, allUsers] = React.useState([]);

1

Gracias por tu gran ayuda. Por favor, perdone a @ali sasani por aceptar la respuesta anterior.. Él respondió primero. No pienses mal. incluso tú también respondiste lo mismo y correcto

-SreRoR

28/03/2021 a las 19:42