查找方法 returns 未定义

Question

我在用户数组上创建了查找方法，但 selectedUserId = undefined 如何在异步函数之后必须执行此方法，以便 selectedUserId 不未定义？

function App() { 
const [selectedUserId, setSelectedUserId] = useState(null)
const [users,setUsers] = useState([])
const [loading, setLoading] = useState(false)
console.log(users)

useAsyncEffect(async () => {
  setLoading(true)
  const res = await fetch('https://jsonplaceholder.typicode.com/users')
  const data = await res.json()
  setUsers(data)
  setLoading(false)
 }, [])

 const selectedUser = users.find(u => u.id === selectedUserId)
 console.log(selectedUser)

 const onUserClick = (userId) => {
  setSelectedUserId(userId)
}

if(loading) {
  return <img src={preloader} alt="preloader"/>
} 

return (
  <div>
  { !selectedUser ? <ListUsers users={users} onUserClick={onUserClick} /> : <Profile user= 
  {selectedUser}  />
  }
  </div>
 )
 }

Answer 1

useEffect() 钩子将在渲染/组件更新后调用。因此，第一次 users 值将为空数组。

因此，selectedUser 值将是未定义的。将其包装在另一个 useEffect 中即可。

查找方法 returns 未定义

find method returns undefined

javascript

arrays

async-await

reactjs