时间戳

首页 > 解决方案 > 使用 React JS 中的钩子未按时在状态上设置数据

reactjs - 使用 React JS 中的钩子未按时在状态上设置数据

问题描述

我正在做一个 Instagram 克隆项目。我正在做个人资料页面部分并遇到了一些问题。我正在尝试使用钩子（useState）来设置来自服务器的用户文档的响应。我的问题是，当我使用 useEffect （仅使用 [] 一次）时，未设置用户名状态。我让 useEffect 无限运行，我发现状态在一段时间后被设置。

    const getUser = async () => {
        await axios.get(`/user/getbyusername/${props.match.params.username}`)
            .then(res => {
                console.log(res.data) // PRINTS DATA CORRECTLY
                setProfileUser({
                    _id: res.data._id,
                    username: res.data.username,
                    fullName: res.data.fullName,
                    followersCount: res.data.followersCount,
                    followingCount: res.data.followingCount,
                    profileImage_PublicId: res.data.profileImage_PublicId,
                    bio: res.data.bio
                })
                console.log(profileUser)
            })
    }

    // DOES NOT SET ANY DATA
    useEffect(() => {
        getUser(); // async function and awaits for the server response

        // HERE, I call getUserPosts using profileUser._id, and it profileUser._id is not set yet
        getPosts(); // async function as well
    }, [])

检查 setProfileUser(...) 是否正确，这是因为它设置了数据，但经过一段时间后，即使我可以在第一次使用 [] 时正确使用 console.log(res.data)。

    // WORKS, sets the user state after two runs. NOT GOOD PRACTICE
    useEffect(() => {
        getUser();
    })

标签： reactjsreact-hooksmern

解决方案

添加另一个useEffect在更改时运行的钩子profileUser，以便它在setProfileUser完成后运行：

useEffect(getUser, []);
useEffect(() => {
    if (profileUser) {
      getPosts();
    }
  },
  [profileUser],
);

推荐阅读