React useState点击后值不更新，双击才生效问题求助

核心问题 #

1. useState更新是异步的：调用setClickedGenre(li.id)后，clickedGenre不会立刻变成新值，所以第一次点击时，axios.get里的clickedGenre还是初始的null，导致请求参数不对，看起来状态没更新。
2. 依赖数组写法错误：你在genreHandler末尾加的,[clickedGenre]是语法错误，这不是React钩子的正确用法。

修复代码 #

把状态更新和请求逻辑拆分，用useEffect监听clickedGenre的变化，当状态更新后再发起请求：

import { useState, useEffect } from 'react';
import axios from 'axios';

// 状态定义
const [clickedGenre, setClickedGenre] = useState<string | null>(null);
const [productList, setProductList] = useState([]);

// 点击事件只负责更新状态
const genreHandler = (event: React.MouseEvent<HTMLLIElement>) => {
  const li: HTMLLIElement = event.currentTarget;
  setClickedGenre(li.id);
};

// 监听clickedGenre变化，发起请求
useEffect(() => {
  // 初始状态为null时不发起请求
  if (!clickedGenre) return;
  
  axios.get(`${API_URL}products?category.genre=${clickedGenre}`)
    .then((response) => {
      setProductList(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
}, [clickedGenre]); // 依赖数组：只有clickedGenre变化时才执行

li标签部分无需修改，保持原写法即可：

<li className="list-group-item text-uppercase" 
  key={category.id} id={category.genre} 
  onClick={genreHandler}>{category.genre}</li>

为什么原代码会出现双击才生效？ #

第一次点击时，setClickedGenre触发了状态更新，但此时axios请求用的还是旧的null值；第二次点击时，clickedGenre已经更新成第一次点击的li.id，这时候axios请求才会用正确的参数，所以看起来像是双击才生效。

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