Question 34221 in React native Question posted in
The official React Native documentation can be found here.

How to get multiple API fetch data avoid first consle.log empty array – React native

When i am trying to fetch multiple API using map() method, and launch the project it’s given me empty which is i understand my console.log couldn’t able to fetch at the time, and just use Ctrl+s press to save the file again, it’s start to giving me value in react native vs code. in this case how can i avoid to launch the project and again Ctrl+s press.
what should i use to avoid them and once i launch, i will able to fetch the data.

i already have tried setinterval but it’s repeating me empty array, the setinterval isn’t reach to fetch again.

should i try any function for it or something?

here is my code in vs code:

const [dataLoc, setDataLoc] = useState([]);
const ids = [1,2,3,4,5];

useEffect(() => {
  ids?.map((id) => {
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then((response) => response.json())
      .then((dataLoc) => setDataLoc((prev) => [...prev, dataLoc.title]))
      .catch((error) => console.error(error));
  });
}, []);

console.log(dataLoc);

when i tried it to run in vs code i get this problem as i mention already.

Anyone can help me? i’m stack at the place for a long time. i appreciate your trying.
Thanks for your trying in advance!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    To avoid Warn: Possible unhandled Promise Rejection (id:0)

       useEffect(() => {
     fetchData();
    }, []);
    
    async function fetchData(){
    
    try{
const requestArray = await Promise.all(ids?.map((id) => {
        return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
          .then((response) => response.json())
          .then((dataLoc) => {
            return dataLoc.title;
          })
          .catch((error) => console.error(error));
      }));
    
      console.log(JSON.stringify(requestArray));
      setDataLoc(requestArray);
    }
    catch (error) {
                console.log(error);
            }
     }

  2. 0

    You may try the Promise.all() approach mentioned in comments above.

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

async function fetchData(){
  const requestArray = await Promise.all(ids?.map((id) => {
    return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then((response) => response.json())
      .then((dataLoc) => {
        return dataLoc.title;
      })
      .catch((error) => console.error(error));
  }));

  console.log(JSON.stringify(requestArray));
  setDataLoc(requestArray);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search