React settimeout 函数导致页面反复刷新

如何解决React settimeout 函数导致页面反复刷新

我和我的朋友正在尝试创建一个 React 应用程序。在这个场景中，我们想要找出当前登录的用户，然后发送一个 post 请求来确定与他们在同一个“房间”中的每个人，并在页面加载时将其显示在应用程序上。我们将数据作为数组发回。虽然当我们 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,})
        }
    })
})

console

解决方法

您不应该那样使用 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]);