此问题已在此处找到答案：

使用状态设置方法不立即反映变化（13个答案）
两天前关门了。
我有一个组件，我在其中发出http请求以获取一些新闻。一旦我收到新闻，我就调用sortnewsstories函数，根据它的日期对它们进行排序。我正在使用 sort() 函数，但不知何故，它不起作用。它不排序新闻，有时返回空数组。这是我的密码。

import { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [topNews, setTopNews] = useState([]);
  const apiKey = "test key";
  const baseUrl = "https://content.guardianapis.com/";

  useEffect(() => {
    async function fetchData() {
      const news = await fetchNews("news", 15); // I calling fetchNews method which makes https request.
      setTopNews(news.response.results); // This set topNews to results received from http request.
      sortNewsStories("Newest first"); // Here I am sorting news/
    }
    fetchData();
  }, []);
  console.log(topNews); // This returns unsorted array of object which is expected.
  const sortNewsStories = (order) => {
    topNews.sort((a, b) => { // Here I am using sort method to sort the array of objects
      if (order === "Newest first") { // check if order is newest then sort it accordingly.
        return new Date(b.webPublicationDate) - new Date(a.webPublicationDate);
      } else {
        return new Date(a.webPublicationDate) - new Date(b.webPublicationDate);
      }
    });
    setTopNews(topNews); // set topNews again with sorted topNews array which is not working and sometimes it becomes empty array with no news in it and sometimes it has objects with news in it but not sorted.
    console.log("SORTED: ", topNews); // Here is shows either empty or unsorted array.
  };

  const fetchNews = async (section, pageSize) => {
    const url = `${baseUrl}${section}?show-sections=true&page-size=${pageSize}&api-key=${apiKey}`;
    const news = await fetch(url);
    return await news.json();
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

下面是此代码的代码沙盒。
https://codesandbox.io/s/inspiring-cray-mq7bo?file=/src/app.js:0-1228