Reactjs 在useEffect钩子api调用中设置初始状态时，如何通过单击按钮更新状态？

我正在通过API调用创建一个列表，然后尝试通过单击按钮对列表进行排序。我已验证排序方法有效，但状态未更新/列表未更新。我想我遗漏了一些有用的东西。我怎样才能做得更好

useEffect(() => {
  setLoading(true)
  async function getScores(){
    const response = await fetch('http://localhost:3000/api/scores')
    const body = await response.json();
    let entries = [];
      body.forEach((x => {entries.push([x.firstName, x.lastName, x.score])}));
    const sortedEntries = entries.sort((a,b) => b[2] - a[2]);
    setEntry(sortedEntries)
    setLoading(false);
  }
getScores();
}, []);

const sortByFirstName = () =>{
  const entryByFirstName = entry.sort((a,b) => {
    return a[0].localeCompare(b[0]);
    });
  setEntry(entryByFirstName);
  console.log(entryByFirstName)
};

return (
  <div className="ui segment">
  {loading
  ?
  <div className="ui active inverted dimmer">
  <div className="ui text loader">Loading</div>
  </div>
    :
    <div>
    <table className="table">
    <tbody>
      {entry.map((e) => (
      <tr key={e.id}>
        <td >{e[0]}</td>
        <td >{e[1]}</td>
        <td >{e[2]}</td>
      </tr>
      ))}
    </tbody>
  </table>
  <div className="ui button" onClick={sortByFirstName} >Sort by First Name</div>
  </div>
  }
  </div>
  );
}

useffect（（）=>{
设置加载（真）
异步函数getScores（）{
const response=等待获取（'http://localhost:3000/api/scores')
const body=wait response.json（）；
让条目=[]；
body.forEach（（x=>{entries.push（[x.firstName，x.lastName，x.score]））；
const sortedEntries=entries.sort（（a，b）=>b[2]-a[2]）；
setEntry（分拣机）
设置加载（假）；
}
获取分数（）；
}, []);
const sortByFirstName=（）=>{
const entryByFirstName=entry.sort（（a，b）=>{
返回a[0]。localeCompare（b[0]）；
});
setEntry（entryByFirstName）；
console.log（entryByFirstName）
};
返回(
{加载
?
加载
:
{entry.map（（e）=>(
{e[0]}
{e[1]}
{e[2]}
))}
按名字排序
}
);
}

为了避免改变现有状态，您需要在排序之前创建一个处于状态的数组副本。更改：

  const entryByFirstName = entry.sort((a,b) => {
    return a[0].localeCompare(b[0]);
    });

到

---

否则，如果React看到您调用了一个状态更新程序，其值与当前状态中的值相比

=

，它将假定它是相同的，因此它将跳过计算更改。

您是一个真正的天使。非常感谢。

  const entryByFirstName = entry.slice().sort((a,b) => {
    return a[0].localeCompare(b[0]);
    });