Javascript React settimeout函数导致页面重复刷新

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

下面我提供了React、server和控制台的代码

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)

---

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

---

詹姆斯：你应该用反应钩来消除副作用。谢谢你的帮助

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]);