我有一个名为responses的状态，它最初是一个空数组。在我从一个API中获取一些数据后，它是一个对象数组。我将该数组的每个对象推送到本地创建的数组名称listMeals。在将每个对象推送到listMeals后，我通过调用setResponse将名为Response的状态更新为listMeals。

import React , { useEffect,  useState, useCallback } from 'react';
import './App.css';

const ste = {
  background:"pink",
  border:"2px solid purple",
  margin:"20px 0px",
  display:"flex",
  flexDirection:"Column",
  justifyContent:"center",
  alignItems:"center",}

function App() {

  const [responses, setResponse] = useState([]);

    useEffect(()=>{
      const fetchData =  async () =>{
        const  response = await fetch("APi");
        const responseData = await response.json();
        const listMeals =[]
        for (const key in responseData){
          listMeals.push({
            id:responseData[key].id,
            name:responseData[key].name,
            ingredients:responseData[key].ingredients
          })
        }
          setResponse(listMeals);
         
      }
      fetchData()},[]);

    const compare = useCallback(( a, b )  => {
      if ( a.name < b.name ){
        return -1;
      }
      if ( a.name > b.name ){
        return 1;
      }
      return 0;
    },[]);

    const sort = () => {
    setResponse(previousList => previousList.sort(compare);}
  
  return (
    <div className="App">

    <button onClick={sort}>Sort</button>

      {responses.map(each => {
        return <div style={ste} key={each.id}>
                  <h2>{each.name}</h2>
                  {each.ingredients.map(ingr =>
                  {return <ul key={Math.random()}>
                          <li>{ingr.name}</li>
                          <li>{ingr.quantity}</li>
                          <li>{ingr.quantity_type}</li>
                          </ul>} )}</div>
        })
      }
    </div>
  );
}

export default App;

稍后，我想在按下名为sort的按钮时按降序对Array进行排序，为此，我在前一个状态上使用sort（），但状态没有更新。请帮助。