"为什么我在 selectedUser 中有未定义？"

Question

Why do I have undefined in selectedUser? After all, I go through the find method through the users array and the first id of the users array should be written to selectedUser

function App() { 
const [selectedUserId, setSelectedUserId] = useState(null)
const [users,setUsers] = useState([])
const selectedUser = users.find(u => u.id === selectedUserId)
console.log(users)
console.log(selectedUser)

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

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

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

Answer 1

You can use a loading state to determine when the async function is done and only then you can set the selected user. Otherwise, it remains set to 'null' when the 'return' is rendered.

 function App() { 
    const [selectedUserId, setSelectedUserId] = useState(null)
    const [users,setUsers] = useState([])
    const selectedUser = users.find(u => u.id === selectedUserId)
    const [loading, setLoading] = useState(false)

    console.log(users)
    console.log(selectedUser)
    
    useAsyncEffect(async () => {
      setLoading(true)
      const res = await fetch('https://jsonplaceholder.typicode.com/users')
      const data = await res.json()
      setUsers(data)
      setLoading(false)
    }, [])
    
    const onUserClick = (userId) => {
      setSelectedUserId(userId)
    }
   if (loading){
      return "Loading..."
      // you can use a nicer loader component here
   }
    
    return (
      <div>
      { selectedUser ? <ListUsers users={users} onUserClick={onUserClick} /> : <Profile user= 
     {selectedUser}  />
      }
      </div>
    )
    }