React Hooks中useState状态更新延迟：如何单次点击触发正确请求？

问题核心在于useState的异步更新特性：调用select("popular")后，组件的selected状态不会立即同步更新，紧接着执行getQuotes()时，函数内读取的还是更新前的旧selected值——这就导致第一次请求用了错误的参数，直到第二次点击时状态才完成更新，请求才能拿到正确数据。

给你两种直接可行的解决方法：

方法1：将目标状态作为参数传入getQuotes #

直接把要切换的分类值传给getQuotes，让请求逻辑直接使用这个参数，同时更新组件状态：

let [popularQuotes, setPopularQuotes] = useState([])
let [newQuotes, setNewQuotes] = useState([])
let [selected, select] = useState("popular")

const getQuotes = async(sortType) => {
  Post('https://example.com/api/quotes', {
    sort: sortType
  }).then((r) => sortType == "popular" ? setPopularQuotes(r) : setNewQuotes(r))
}

// 点击事件修改为：
onClick={() => {
  select("popular");
  getQuotes("popular");
}}

这样不管状态是否异步更新，请求都能拿到最新的分类值，一次点击就能完成状态更新和数据请求。

方法2：用useEffect监听selected状态变化 #

通过useEffect监听selected的变化，只要状态更新就自动触发请求，点击事件只负责更新状态：

import { useState, useEffect } from 'react';

let [popularQuotes, setPopularQuotes] = useState([])
let [newQuotes, setNewQuotes] = useState([])
let [selected, select] = useState("popular")

const getQuotes = async() => {
  Post('https://example.com/api/quotes', {
    sort: selected
  }).then((r) => selected == "popular" ? setPopularQuotes(r) : setNewQuotes(r))
}

// 监听selected变化，自动调用请求
useEffect(() => {
  getQuotes();
}, [selected]) // 依赖项为selected，状态变更时触发

// 点击事件简化为：
onClick={() => select("popular")}

这种方式更贴合React的状态驱动逻辑，状态更新后自动触发数据获取，避免手动同步状态和请求的时机问题。

内容的提问来源于stack exchange，提问作者Scollier