Question

我正在通过API调用创建列表，然后尝试通过单击按钮对列表进行排序。我已经验证了排序方法可以工作，但状态未更新/列表未更新。我认为useEffect缺少了一些东西。我该怎么做呢？

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>
  );
}

Answer 1

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

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

到

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

否则，如果React看到您调用的状态更新程序的值是当前状态下的值的===，它将假定它是相同的，因此它将跳过计算更改。

在useEffect挂钩API调用中设置初始状态后，如何通过单击按钮更新状态？

1 个答案: