除非我设置超时，否则在 useeffect 中使用 setState 获取和设置数据不会出现在控制台日志中

Question

function Groups() {
  const [gamesD, setGames] = useState([]);
  const notInitialRender = useRef(false);
  useEffect(() => {
    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 < groups.length; i++) {
      const fetchGame = async () => {
        const response = await instance.get(`Euro_events?grp=${groups[i]}`);
        gamesArray.push(response.data);
      };
      fetchGame().then(setGames(gamesArray));
    }
  }, []);
  useEffect(() => {
    if (notInitialRender.current) {
      const timer = setTimeout(() => {
        console.log(gamesD[0][0].eventname);
      }, 100);
      return () => clearTimeout(timer);
    } else {
      notInitialRender.current = true;
    }
  }, [gamesD]);

  function logEventsArray(el) {
    console.log('games');
  }
}

所以我从我的数据库中为数组组中的每个项目获取数据，然后我想在组件的 jsx 部分映射这些数据（两次，因为它是数组中的数组）。但问题是状态更改“太晚了” 这是我的猜测，因为控制台日志不显示推送到 gamesArray 的数据，除非我设置超时。超时不起作用，因为 jsx 部分不会映射任何东西。 console.log(games) 仅在网站呈现后在 vs 代码中更改某些代码时才显示数据。

有什么建议吗？

Answer 1

尝试使用自定义挂钩来获取所有游戏。
然后，您可以在获取所有数据后使用这些数据：

const useGetGames = () => {
  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 = () => {
    try {
      for (let i = 0; i < groups.length; i++) {
        const { data } = await instance.get(`Euro_events?grp=${group}`);
        setGamesArray((games) => [...games, ...data]);
      }
    } catch (err) {
      console.log(err);
    }

    setLoading(false);
  };

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

  return { loading, gamesArray };
};

然后使用以下方法检索数据：

const { loading, gamesArray } = useGetGames()

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

除非我设置超时，否则在 useeffect 中使用 setState 获取和设置数据不会出现在控制台日志中

Data fetched and set with setState inside useeffect doesnt appear in console log unless i set a timeout

javascript

setstate

reactjs

use-effect

use-state