find 方法返回未定义答案

【问题标题】：find method returns undefinedfind 方法返回未定义
【发布时间】：2022-02-07 01:02:36
【问题描述】：

我在 users 数组上创建了 find 方法，但 selectedUserId = undefined 如何在 async 函数之后执行此方法，以使 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>
 )
 }

【问题讨论】：

在这种情况下，感觉selectedUser 可以完全避免。而不是<Profile user={selectedUser} /> 尝试：<Profile user={users.find(u => u.id === selectedUserId)} />。并且，而不是 { !selectedUser ? .. 尝试 { !selectedUserId ? ..。
谢谢，这确实有效！

标签： javascript arrays reactjs async-await

【解决方案1】：

useEffect() 钩子将在渲染/组件更新后被调用。所以，在第一次users 值将是空数组。

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

【讨论】：