Блог

 function Groups() {  const [gamesD, setGames] = useState([]);  const notInitialRender = useRef(false);  useEffect(() =gt; {  const gamesArray = [];  const groups = [  'EURO Grp. A',  'EURO Grp. B',  'EURO Grp. C',  'EURO Grp. D',  'EURO Grp. E',  'EURO Grp. F',  ];  const instance = axios.create({ baseURL: server });  for (let i = 0; i lt; groups.length; i  ) {  const fetchGame = async () =gt; {  const response = await instance.get(`Euro_events?grp=${groups[i]}`);  gamesArray.push(response.data);  };  fetchGame().then(setGames(gamesArray));  }  }, []);  useEffect(() =gt; {  if (notInitialRender.current) {  const timer = setTimeout(() =gt; {  console.log(gamesD[0][0].eventname);  }, 100);  return () =gt; clearTimeout(timer);  } else {  notInitialRender.current = true;  }  }, [gamesD]);   function logEventsArray(el) {  console.log('games');  } }  

Поэтому я извлекаю данные из своей базы данных для каждого элемента в группах массивов, а затем хочу сопоставить эти данные (дважды, потому что это массив внутри массива) в части jsx компонента. Проблема, однако, в том, что состояние изменяется «слишком поздно», Это мое предположение, потому что в журнале консоли не отображаются данные, которые вводятся в игровой массив, если я не установлю тайм-аут. Однако тайм-аут не работает, потому что тогда часть jsx не отображается ни через что. Console.log(игры) показывает данные только в том случае, если какой-либо код был изменен в vs-коде после рендеринга сайта.

Есть какие-нибудь советы?

Попробуйте использовать пользовательский хук для извлечения всех ваших игр.
Затем вы можете использовать данные, как только они все будут извлечены:

 const useGetGames = () =gt; {  const [gamesArray, setGamesArray] = useState([]);  const [loading, setLoading] = useState(true);   const groups = [  'EURO Grp. A',  'EURO Grp. B',  'EURO Grp. C',  'EURO Grp. D',  'EURO Grp. E',  'EURO Grp. F',  ];   const instance = axios.create({ baseURL: server });   const fetchGames = () =gt; {  try {  for (let i = 0; i lt; groups.length; i  ) {  const { data } = await instance.get(`Euro_events?grp=${group}`);  setGamesArray((games) =gt; [...games, ...data]);  }  } catch (err) {  console.log(err);  }   setLoading(false);  };   useEffect(() =gt; {  fetchGames();  }, []);   return { loading, gamesArray }; };  

Затем извлеките данные с помощью:

 const { loading, gamesArray } = useGetGames()  if (!loading) {  // All data should be available  console.log(gamesArray) }