Javascript 在React中使用UseState处理事件

我创建了3个组件：App、UserList和UserInfo。 当我单击“获取用户”按钮时，我会收到一个用户列表，当我单击列表中的每个用户时，如何获取用户信息

我读过关于事件处理的内容，但不知道如何在本例中应用它

App.js

UserList.js

UserInfo.js

---

你已经非常接近于让它工作了。。。只是你没有在你的应用程序组件中使用onClickUser道具，也就是说，你没有传递它。。下面是一个例子，说明如何实现您的目标：

const{useState}=React； const{render}=ReactDOM； const UserList={users，onClickUser}=>{ 回来 {users.mapuser=>{ 回来 onClickUseruser}style={{cursor:'pointer'}}> {user.name.first} ; }} ; }; const UserInfo={information}=>{ 回来 {information.name.first}{information.name.last} {information.email} {信息.性别} ; }; 功能应用程序{ const[users，setUsers]=useState[]； 常量[clickedUser，setClickedUser]=useState； 异步函数getUsers{ 试一试{ const response=等待获取`https://randomuser.me/api/?results=5`; 如果！回答。好的{ 抛出错误在获取API期间出现错误； } const data=wait response.json； setUsersdata.results； 控制台日志数据； }捕捉错误{ console.logerror； } } const handleUserClick=用户=>{ console.loguser； 设置ClickedUserUser； }; 回来 getUsers}>getUsers {users.length？

单击用户以查看用户信息

：} {/*这是您以前拥有的：*/} {/* */} {clickedUser？：} ; } 函数uuid{//仅在此处使用，这样就不会爆炸 返回xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxx。替换/[xy]/g，函数C{ var r=Math.random*16 | 0， v=c==x？r:r&0x3 | 0x8； 返回v.toString16； }; } 呈现、文档、正文；

---

您没有将事件处理程序传递给UserList组件。您能告诉我怎么做吗？我对反应还不熟悉，但还是不太了解。非常感谢@Matt，这非常有用

import React, { useState } from 'react';
import './App.css';
import UserList from './components/UserList'
import UserInfo from './components/UserInfo'

function App() {
  const [users, setUsers] = useState([])


 async function getUsers(){
    try{
      const response = await fetch(`https://randomuser.me/api/?results=5`)
      if(!response.ok){
        throw Error('something went wrong during fetch API')
      }

      const data = await response.json()
      setUsers(data.results)
      console.log(data)

    } catch (error){
      console.log(error)

    }
  }


  return (
    <div className="App">

     <button onClick={()=> getUsers()}>Get Users</button>
     <UserList users={users}/>
    </div>
  );
}

export default App;

import React from 'react';
import uuid from 'uuid'

const UserList = ({users, onClickUser}) => {
    return (
        <div>
            <ul>
                {
                    users.map(user =>{
                        return(
                    <li key={uuid()} onClick={() => onClickUser(user) }>{user.name.first}</li>
                    ) 
                })}
            </ul>
        </div>
    );
};

export default UserList;

import React from "react";

const UserInfo = ({ information }) => {
  return (
    <div>
      <div>
        {information.name.first} {information.name.last}
      </div>
      <div>{information.email}</div>
      <div>{information.gender}</div>
    </div>
  );
};

export default UserInfo;