Блог

это мой код реакции, здесь я получаю данные из бэкенда с помощью mongo. мои данные отображаются, console но не отображаются на веб-странице, на которой они отображаются » пользователи.карта не является функцией. но если я попробую API jsonplaeholder, то он будет работать правильно.

 import React, { useEffect, useState } from "react";



const Get = () => {
    const [users,setUsers] = useState([]);
  const getAllUser = async () => {
    const response = await fetch("/get");
    setUsers(await response.json());
    console.log(users);
};

    useEffect(() => {
      getAllUser();
    },[]);


    return (
      <>
      { users.map((ce) => 
           <div key={ce.id}>
               <h2>{ce.name}</h2>
               <p>{ce.email}</p>

           </div>)}
     </>
    )
  
}
     
       
export default Get;
 

это данные базы данных

 {"status":"success","results":2,"data":{"users":[{"_id":"6134fcc6eddae0ec522fecd7","name":"ram ","email":"ram@gmail.com","number":9455294552,"__v":0},{"_id":"61364d918a8ab07512094443","name":"rawal","email":"rawal@gmail.com","number":9309304400,"__v":0}]}}
 

Вам нужно правильно настроить свое состояние res.data.users следующим образом.

 import React, { useEffect, useState } from "react";

const Get = () => {
  const [users, setUsers] = useState([]);

  const getAllUser = async () => {
    const response = await fetch("/get");
    response.json().then((res) => setUsers(res.data.users));
    console.log(users);
  };

  useEffect(() => {
    getAllUser();
  }, []);

  return (
    <>
      {users.map((ce) => (
        <div key={ce.id}>
          <h2>{ce.name}</h2>
          <p>{ce.email}</p>
        </div>
      ))}
    </>
  );
};

export default Get;