时间戳

首页 > 解决方案 > 反应settimeout函数导致页面重复刷新

javascript - 反应settimeout函数导致页面重复刷新

问题描述

我和我的朋友正在尝试创建一个 React 应用程序。在这种情况下，我们想要找出当前登录的用户，然后发送一个发布请求来确定与他们在同一个“房间”中的每个人，并在页面加载时将其显示在应用程序上。我们将数据作为数组发回。虽然当我们 console.log 我们的“响应”时，我们会得到多个输出。此外，当我们尝试执行 setRoomies 时，我们会收到对我们服务器的不间断请求。

下面我提供了 React、服务器和控制台的代码。

function Dashboard() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [user, setUser] = useState('');
    const [roomKey, setRoomKey] = useState('')
    const [roomies, setRoomies] = useState('')

    setTimeout(function () {
        const currUser = JSON.parse(localStorage.getItem('user'));
        if (currUser) {
            setEmail(currUser.email);
            setUser(currUser.name);
            setRoomKey(currUser.roomKey)
        } else {
            setUser(null)
        }

    }, 10);


    const payload = {
        roomKey: roomKey
    }
    setTimeout(async function () {
        const response = await axios({
            url: 'http://localhost:4000/api/dashboard',
            method: 'post',
            data: payload
        })

        // setRoomies(response.data.roommates)
        console.log(response.data.roommates)
    }, 10)

userRouter.post('/dashboard', async function (req, res) {
    console.log(req.body)
    const sendKey = req.body.roomKey

    user.find({ roomKey: sendKey }, await function (err, foundMates) {
        console.log(foundMates)
        if (err) {
            res.send({
                token: USER_LOGIN_FAIL
            })
        } else {
            console.log(foundMates);
            res.send({
                token: USER_LOGIN_SUCCESS,
                roommates: foundMates,
            })
        }
    })
})

安慰

标签： javascriptnode.jsreactjsmongodbmern

解决方案

你不应该这样使用 setTimeout 。相反，您应该使用 useEffect 来实现您想要的。可能需要一些改变，但想法是做这样的事情

useEffect(() => {
       const currUser = JSON.parse(localStorage.getItem('user'));
       if (currUser) {
          setEmail(currUser.email);
          setUser(currUser.name);
          setRoomKey(currUser.roomKey)
       } else {
                setUser(null)
            }
    
       }, []);
    
useEffect(() => {
        if(!roomKey) {
          return;
        }
    
        const payload = {
            roomKey: roomKey
        }
        async function getInfo() {
            const response = await axios({
                url: 'http://localhost:4000/api/dashboard',
                method: 'post',
                data: payload
            })
    
            // setRoomies(response.data.roommates)
            console.log(response.data.roommates)
        }
        getInfo();
}, [roomKey]);

推荐阅读