Как повторно выполнить рендеринг дочернего компонента при обновлении состояния внутри дочернего компонента

Question

Я только учусь реагировать и пытаюсь создать простой проект, у меня есть кнопка, при которой он сортирует данные, поступающие из API, в соответствии с возрастом пользователя, когда я консоль регистрирую состояние, в котором находятся данные отсортировано, вероятно, так, как я хочу, единственная проблема в том, что компонент не рендерится после обновления состояния.

Также дайте мне знать, если в коде есть какие-либо другие ошибки, ваша помощь очень полезна.

const Test = () => {


    const [state, setState] = useState([]);

    useEffect(() => {
        const fetchApi = async () => {
            setState(await fetchUsersData())
        }

        fetchApi()
    },[setState])


    const info = state.map((data, i) => {
        return (<div key={i}>
        <p >{data.users}</p>
        <p >{data.ages}</p>
   
        </div>)
    })




    const sortByAge = () => state.sort((a, b) => {
        return a.age < b.age ? 1: -1
    })


    const handleClick = () => {
        setState(sortByAge())
    }


    return (
        <div>
            <button onClick={handleClick}>Sort by Age</button>
            {info}
        </div>
    );
}

export default Test;

Answer 1

Ваша проблема в том, что вы изменяете состояние при сортировке. Попробуйте сделать мелкую копию, когда примените сортировку:

const sortByAge = () => [...state].sort((a, b) => {
  return a.age < b.age ? 1: -1
})