React setState异步问题：如何确保状态更新后执行过滤逻辑？

核心问题分析 #

你遇到的问题根源在于React的setState是异步批量更新机制：连续调用两次setA时，第二次调用里的a还是更新前的旧状态值，根本没用到第一次setA(articles)后的新值，导致过滤逻辑完全失效。

最优解决方法：直接计算目标状态，单次更新 #

不需要分两次调用setA，直接基于原始的articles计算最终要展示的列表，一次性完成状态更新即可：

const [selectedTopic, setSelectedTopic] = React.useState('')
const [a, setA] = React.useState(articles)

const handleApply = () => {
  // 先默认使用原始articles数据
  let filteredArticles = articles;
  // 如果有选中主题，直接基于原始数据执行过滤
  if (selectedTopic !== "") {
    filteredArticles = articles.filter(article => 
      selectedTopic === article.frontmatter.topic
    );
  }
  // 单次设置最终状态，避免异步状态不一致问题
  setA(filteredArticles);
}

为什么之前的useEffect会触发无限循环？ #

如果用useEffect监听a或selectedTopic，但在useEffect内部又调用setA，a的变化会再次触发useEffect，形成闭环循环。其实这个场景完全不需要useEffect，直接在点击事件里处理更高效。

补充：函数式更新（适用于依赖前一次状态的场景） #

如果你的业务逻辑需要基于上一次的a状态进行更新（比如不是每次都重置为原始articles），可以使用setA的函数式更新写法，确保拿到最新的状态值：

const handleApply = () => {
  setA(prevA => {
    // 先重置为原始articles
    let newA = articles;
    if (selectedTopic !== "") {
      newA = newA.filter(article => 
        selectedTopic === article.frontmatter.topic
      );
    }
    return newA;
  });
}

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