admin 管理员组

文章数量: 1086019

I have the following code in the ponent: I am not able to get an updated state.

When I call createUserList I can see the users in UserList ponent but in UserComponet when I log users I can not see users there.

But I can see updated state in react dev tools

The code I am using :

function UserComponent() {
    const [users, setUsers] = useState<any>([])


  const register = () => {
    userAgent.delegate = {
      onMessage(message: Message) {
        let usernameList = message.event.entry
        if (message.event['@_category'] === 'activate') {
          createUserList(usernameList); 
        } else if (message.event['@_category'] === 'de-activate') {
          
          // empty user list but I can see users in react dev tools
          console.log(users)
          const username = message.event.entry
          removeUser(username)
        }
      }
    }
  }

  const createUserList = (usernameList: any) => {
    let userList: any = []
    usernameList.forEach((user: any) => {
      userList.push({'uri': user['@_uri'], 'name': user['@_uri'].substr(10, 8)})
    })

    // here I can see updated userList
    console.log(userList)
    setUsers(userList)
    setTimeout(() => {

      // users is empty here
      console.log(users)
    }, 5000)
  }

  return (
    <UserList users={users}/>
  )

}

function UserList({users}) {
    return (
        <div>
            {users.map((user) => <h2>user</h2>)}
        </div>
    )
}

I have the following code in the ponent: I am not able to get an updated state.

When I call createUserList I can see the users in UserList ponent but in UserComponet when I log users I can not see users there.

But I can see updated state in react dev tools

The code I am using :

function UserComponent() {
    const [users, setUsers] = useState<any>([])


  const register = () => {
    userAgent.delegate = {
      onMessage(message: Message) {
        let usernameList = message.event.entry
        if (message.event['@_category'] === 'activate') {
          createUserList(usernameList); 
        } else if (message.event['@_category'] === 'de-activate') {
          
          // empty user list but I can see users in react dev tools
          console.log(users)
          const username = message.event.entry
          removeUser(username)
        }
      }
    }
  }

  const createUserList = (usernameList: any) => {
    let userList: any = []
    usernameList.forEach((user: any) => {
      userList.push({'uri': user['@_uri'], 'name': user['@_uri'].substr(10, 8)})
    })

    // here I can see updated userList
    console.log(userList)
    setUsers(userList)
    setTimeout(() => {

      // users is empty here
      console.log(users)
    }, 5000)
  }

  return (
    <UserList users={users}/>
  )

}

function UserList({users}) {
    return (
        <div>
            {users.map((user) => <h2>user</h2>)}
        </div>
    )
}
  • javascript
  • reactjs
  • typescript
  • use-state
Share Improve this question asked Apr 14, 2021 at 10:35 Rushikesh KoliRushikesh Koli 331 gold badge1 silver badge6 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

You can use useEffect for that and pass the state as dependency, so every time users state get change it would get invoke.

useEffect(() => {
    console.log(users);
    }, [users])

useEffect should serve your purpose.

useEffect(() => {
console.log(users)
  
},[users]);

The above function (in this case, its console logging "users") is executed only when its (users) state is changed or updated. Consider replacing the setTimeOut with useEffect instead.

Use useEffect hook:

useEffect(() => console.log(users), [users])

Full code:

function UserComponent() {
  const [users, setUsers] = useState<any>([])

  useEffect(() => console.log(users), [users])


  const register = () => {
    userAgent.delegate = {
      onMessage(message: Message) {
        let usernameList = message.event.entry
        if (message.event['@_category'] === 'activate') {
          createUserList(usernameList); 
        } else if (message.event['@_category'] === 'de-activate') {
          
          // empty user list but I can see users in react dev tools
          console.log(users)
          const username = message.event.entry
          removeUser(username)
        }
      }
    }
  }

  const createUserList = (usernameList: any) => {
    let userList: any = []
    usernameList.forEach((user: any) => {
      userList.push({'uri': user['@_uri'], 'name': user['@_uri'].substr(10, 8)})
    })

    // here I can see updated userList
    console.log(userList)
    setUsers(userList)
  }

  return (
    <UserList users={users}/>
  )

本文标签： javascriptReact hooks useState not updating the stateStack Overflow

版权声明：本文标题：javascript - React hooks useState not updating the state - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744086750a2531269.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。