使用React JS中的挂钩在状态上未及时设置数据

Question

我正在从事Instagram克隆项目。我正在做个人资料页面部分，遇到了一些问题。我正在尝试使用hooks（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（…）是否正确，这是因为它设置了数据，但经过一段时间后，即使我可以在正确的第一时间使用[]来控制台.log（res.data）。

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

Answer 1

添加另一个在profile ileUser更改时运行的use效应钩子，以便它在setProfileUser完成后运行：

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