从兄弟组件 React hooks 调用 function

Question

How can I call a function that belongs to a sibling component either with props or context?

I've been trying to to this using props and context but I'm getting confused because I'm not passing variables but an actual function with parameters

I want to call the function handleSelectedUser that is inside the List component when I click the delete button in the Card component

Here it is in action in Replit

here is my code

App component:

function App() {
  const [currentUser, setCurrentUser] = useState(null)
  
   
  return (
    <main>
        <List 
          setCurrentUser={setCurrentUser} />
        <Card 
          currentUser={currentUser} 
          setCurrentUser={setCurrentUser}
          />
    </main>  );
}

List Component

function List({setCurrentUser}) {
  const [users, setUsers] = useState([])

  useEffect(() => {
    getUsers()
  }, [])

  async function getUsers(){
    const apiUrl = "https://randomuser.me/api?results=40"
    const result = await fetch(apiUrl)
    const data = await result.json()
    setUsers(data.results)
  }

  function handleDeleteSelectedUser(userToDelete){
    users.filter(user => user.phone != userToDelete.phone)
  }

  function handleSelectedUser(selectedUser){
    setCurrentUser(selectedUser)
  }
  
  
  return(
    <>
      <div>
        <h1>List</h1>
        {
          users.map((user) => 
          <li onClick={() => handleSelectedUser(user)} key={user.phone}>
          {user.name.first} {user.name.last}</li>)
        }
      </div>
    </>
  )
}

Card Component

function Card({currentUser, setCurrentUser}){
  
  function handleDelete(user){
    //Call handleSelectedUser in <List />
    setCurrentUser(null)
  }
  
  return (
    <div className="container">
      {currentUser && 
      <>
        <h2>{currentUser.name.first}'s Details</h2>
        <p>{currentUser.phone}</p>
        <button onClick={() => handleDelete(currentUser)}>Delete</button>
      </>
      }
    </div>
  )
}

Answer 1

If you're trying to "listen" for changes in a sibling component, a common approach is to use a shared prop as a hook dependency in the sibling.

For example:

function List({ currentUser, setCurrentUser }) {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    getUsers();
  }, []);

  async function getUsers() {
    const apiUrl = "https://randomuser.me/api?results=40";
    const result = await fetch(apiUrl);
    const data = await result.json();
    setUsers(data.results);
  }

  function handleDeleteSelectedUser(userToDelete) {
    users.filter((user) => user.phone != userToDelete.phone);
  }

  function handleSelectedUser(selectedUser) {
    setCurrentUser(selectedUser);
  }

  useEffect(() => {
    // do something when currentUser changes
    handleSelectedUser(currentUser);
  }, [currentUser]);

  return (
    <>
      <div>
        <h1>List</h1>
        {users.map((user) => (
          <li onClick={() => handleSelectedUser(user)} key={user.phone}>
            {user.name.first} {user.name.last}
          </li>
        ))}
      </div>
    </>
  );
}