How to get multiple API fetch data avoid first consle.log empty array-CodePudding

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!

CodePudding user response：

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);
}