`useeffect`无法在组件上获取数据

发布于 2025-02-13 22:05:04 字数 1079 浏览 0 评论 0原文

我试图将一系列对象设置为dineins在使用使用效果之后。我了解的是，接收数据会有某种延迟，因为在获取数据后，状态变量在登录时会返回一个空数组。

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router';
import jwtDecode from 'jwt-decode';

function CheckIns() {
  const [dineIns, setDineIns] = useState([]);

  const navigate = useNavigate();

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      const user = jwtDecode(token);
      if (!user) {
        localStorage.removeItem('token');
        navigate('/login');
      } else {
        async function UserData(user_email) {
          const user_data = await axios
            .get(`/api/users/${user_email}`)
            .then((res) => {
              const info = res.data.reservations;
              setDineIns(info);
              console.log(dineIns);
            });
        }

        UserData(user.email);
      }
    } else {
      navigate('/login');
    }
  }, []);
}

在这里需要纠正什么才能及时设置状态？

原文

I am trying to set an array of objects into dineIns after fetching them inside useEffect. What I understood is that there is some kind of delay in receiving the data because the state variable returns an empty array when I log it after fetching the data.

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router';
import jwtDecode from 'jwt-decode';

function CheckIns() {
  const [dineIns, setDineIns] = useState([]);

  const navigate = useNavigate();

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      const user = jwtDecode(token);
      if (!user) {
        localStorage.removeItem('token');
        navigate('/login');
      } else {
        async function UserData(user_email) {
          const user_data = await axios
            .get(`/api/users/${user_email}`)
            .then((res) => {
              const info = res.data.reservations;
              setDineIns(info);
              console.log(dineIns);
            });
        }

        UserData(user.email);
      }
    } else {
      navigate('/login');
    }
  }, []);
}

What needs to be corrected here to set the state in time?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

国产ˉ祖宗 2025-02-20 22:05:05

SET状态是一个异步操作，它将在设置后记录数据，将记录旧值。

为了确保正确的数据集正确，您可以再次使用SetState，

const info = res.data.reservations
setDineIns(info)
setDineIns(prev => {
  console.log(prev)
  return prev;
})

也可以使用Dineins依赖性使用效果。

我认为您的代码效果很好。

set state is an async operation, which log the data after set it, will log the old value.

To ensure that the data set correctly, you can use setState again

const info = res.data.reservations
setDineIns(info)
setDineIns(prev => {
  console.log(prev)
  return prev;
})

Or you can use effect with dineIns dependence.

I think your code works fine.

回复收藏 0 原文

流绪微梦 2025-02-20 22:05:05

您期望从axios调用Promise，但您是等待 in。
尝试这样更改您的代码：

useEffect(() => {
  const token = localStorage.getItem('token');
  if (token) {
    const user = jwtDecode(token);
    if (!user) {
      localStorage.removeItem('token');
      navigate('/login');
    } else {
      async function UserData(user_email) {
        try {
          const { data } = await axios.get(`/api/users/${user_email}`);
          setDineIns(data.reservations);
          console.log(dineIns);
        } catch (err) {
          console.log(err);
        }
      }

      UserData(user.email);
    }
  } else {
    navigate('/login');
  }
}, []);

You are expecting a Promise from the axios call but you are awaiting it.
Try to change your code like this:

useEffect(() => {
  const token = localStorage.getItem('token');
  if (token) {
    const user = jwtDecode(token);
    if (!user) {
      localStorage.removeItem('token');
      navigate('/login');
    } else {
      async function UserData(user_email) {
        try {
          const { data } = await axios.get(`/api/users/${user_email}`);
          setDineIns(data.reservations);
          console.log(dineIns);
        } catch (err) {
          console.log(err);
        }
      }

      UserData(user.email);
    }
  } else {
    navigate('/login');
  }
}, []);

回复收藏 0 原文

~没有更多了~