Как перерисовать дочерний функциональный компонент?

Question

rt_s23 @rt_s23

React

Как перерисовать дочерний функциональный компонент?

У меня есть запрос на сервер, после завершения которого рисуется компонент UsersList. Также я хочу добавить фильтрацию по городу или компании в алфавитном порядке, и у меня успешно меняется массив объектов users, но мне необходимо перерисовать компонент UsersList, используя новый массив объектов users.

Код:

Родительский компонент App:

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Aside } from './components/aside/Aside';
import { UsersList } from './components/usersList/UsersList';
import './App.scss';
import { UsersTypes } from './interfaces/usersInterface';




const App:React.FC = () => {
  const [users,setUsers] = useState<UsersTypes[]>([]);
  const [loading,setLoading] = useState(false);

  useEffect(()=>{
    const getUsers = async ()=>{
      const result = await axios('https://jsonplaceholder.typicode.com/users');
      setLoading(true);
      setUsers(result.data);
    }
    getUsers();
    console.log(users);
  },[])

  const citySortHandler = () =>{
    setUsers(users.sort((a, b) => a.address.city > b.address.city ? 1 : -1));
    console.log(users);
  }

  const companySortHandler = () =>{
    setUsers(users.sort((a, b) => a.company.name > b.company.name ? 1 : -1));
    console.log(users);
  }

  return (
    <div className='container'>
      <Aside citySort={citySortHandler} compantSort = {companySortHandler}/>
      <UsersList users={users}/>
    </div>
  );
}

export default App;

Компонент UsersList:

import { UsersTypes } from "../../interfaces/usersInterface";
import './usersList.scss'

type usersListProps ={
  users: UsersTypes[]
}


export const UsersList: React.FC<usersListProps> = ({users}) =>{
  

  return(
    <div className="users__container">
      <ul className="users__list">
        {users.map(user=>{
          return(
            <li key={user.id} className='users__item'>
              <div className='users__descr'>
                <span>ФИО: {user.name}</span>
                <span>город: {user.address.city}</span>
                <span>компания: {user.company.name}</span>
              </div>
              <a href="/" className='users__link'>Подробнее</a>
            </li>
          );
        })}
      </ul>
      <p>найдено {users.length} пользователей</p>
    </div>
  );
}


Компонент с кнопками фильтра:

import './aside.scss'

type AsideProps = {
  citySort: () => void,
  compantSort: () => void
}

export const Aside: React.FC<AsideProps> = ({citySort, compantSort}) =>{

  return(
    <div className="aside__container">
      <h1>Сортировка</h1>
      <button onClick={citySort}>По городу</button>
      <button onClick={compantSort}>По компании</button>
    </div>
  );
}