页面正在重定向，而没有在反应中的状态和本地存储中设置值

Question

const [userid, setUserId] = useState()
const handleSubmit = (e) => {
    e.preventDefault()
    axios.post('http://localhost:3001/Signin', { email, password })
        .then(result => {
            if (result.data.message === "Successfully Login") {
                setUserId(((result.data.ID).toString()))
                if(userid === result.data.ID){
                    navigate('/')
                }
            }
        })
        .catch(err => console.log(err))
}

useEffect(() => {
    localStorage.setItem('UserID' , userid)
},[])

这里发生的事情是有一个登录表单，它收集数据，单击按钮，详细信息将在猫鼬中检查，从那里我从结果中获取一个ID，所以现在我想将该ID存储在本地存储中，然后我想重定向到主页，即导航（'/'）。

但是这里页面正在重定向，而没有将数据设置到本地存储中。

任何人都可以帮我解决这个问题吗？我正在学习 React，所以对此不太了解。

提前谢谢您。

Answer 1

您面临的问题可能是由于 JavaScript 的异步特性造成的。当您调用 localStorage.setItem('UserID', userId) 时，它会在使用 setUserId 设置 userid 后立即执行，但 setUserId 是一个异步函数，调用 localStorage.setItem 时 userid 的值可能尚未更新。

要解决此问题，您应该使用 useEffect 挂钩来监视 userId 的更改，然后在 localStorage 中设置该项目。

这是代码的更新版本：

const [userId, setUserId] = useState('');
const handleSubmit = (e) => {
    e.preventDefault();
    axios.post('http://localhost:3001/Signin', { email, password })
        .then(result => {
            if (result.data.message === "Successfully Login") {
                const userIdString = (result.data.ID).toString();
                setUserId(userIdString);
            }
        })
        .catch(err => console.log(err));
}

useEffect(() => {
    if (userId) {
        localStorage.setItem('UserID', userId);
        navigate('/');
    }
}, [userId]);

在此代码中，我向 useEffect 添加了一个依赖数组 [userId]，因此它仅在 userid 更改时运行。当登录成功后更新userid时，useEffect会在localStorage中设置UserID，然后触发导航到主页。