如何使用 Hooks 更新数组状态 onClick()

Question

我有一个推荐用户列表可以关注。我想让用户点击关注按钮并让该用户消失。目前的逻辑是应用获取所有用户，然后过滤掉那些不在用户跟随数组中的用户（在后端找到）。

我可以成功关注用户，但这只会在我进行硬刷新时出现在前端地图中，而不是立即出现，甚至当我在应用中单击时也不会出现。我一直在阅读有关 refs 的内容，并认为可能是因为它没有执行深度数组更改。如何更新前端以立即反映用户已关注某人？

ToFollow.js（要关注的人列表）

const ToFollow = props => {
const [allUsers, setAllUsers] = useState([])
const getAllUsers = () => {
    axios.get('api/auth')
    .then(res => {
    const notFollowed = res.data.filter((f) => !props.user.following.includes(f._id))
   setAllUsers(notFollowed)
 // filters the list of users not currently followed, but only upon hard refresh
})
}

    useEffect(() => {getAllUsers()})

        return (
            <div>
                <h1>to follow</h1>
            {allUsers.length? (
              allUsers.map((user) => (
                    <div key={user._id}>
                        <h4>{user.username}</h4>
                        <FollowButton userToFollow={user} user={props.user} allUsers={allUsers} setAllUsers={setAllUsers}/>
                    </div>
                ))
            ) : <h1>no users to follow</h1>}
            </div>)}

FollowButton.js

const FollowButton = ({ user, userToFollow, allUsers, setAllUsers}) => {

const followUser = userId => {
    axios.post(`/api/follow/${userToFollow._id}`, {followers: userId, following: userToFollow._id})
    .then(console.log('-------, ', userToFollow._id))
    .catch(err => console.log(err))
}

    return (
        <div>
    <button onClick={() => {
        followUser(user._id)}}>Follow</button>
        </div>)}