ReactJS嵌套函数内State不生效：标签无法实现唯一

问题原因分析 #

你遇到的核心问题是React闭包陷阱，并非React的bug：

• generateCards在useEffect(() => {}, [])中仅执行一次，此时生成的<Card>组件绑定的addTag是组件首次渲染时创建的函数，该函数捕获了当时tagList的初始值[]。
• 后续组件重新渲染时会生成新的addTag函数（持有最新的tagList），但<Card>组件始终使用首次生成的旧addTag，导致每次在addTag内打印tagList永远是初始的[]，!tagList.includes(newTag)判断永远为真，无法实现标签唯一性。

而你把const [tagList, setTagList]改成let并手动赋值tagList = [...tagList, newTag]的做法是错误的：

• React状态必须通过setState方法更新，直接修改状态变量不会触发组件重新渲染，只是修改了局部变量，看似“正常”只是巧合（比如其他操作触发了渲染），后续必然会出现状态与UI不一致的bug。

解决方案 #

不需要修改状态的声明方式，只需调整addTag的实现，用函数式更新来判断标签是否存在，这样可以直接获取最新的状态：

function addTag(newTag) {
  // 用函数式更新，直接基于最新的旧状态判断
  setTagList(oldTagList => {
    if (!oldTagList.includes(newTag)) {
      return [...oldTagList, newTag];
    }
    // 如果已存在，直接返回旧状态，避免不必要的渲染
    return oldTagList;
  });
}

额外优化（可选） #

如果需要让generateCards能获取到最新的addTag，可以用useCallback包裹addTag，并更新useEffect的依赖数组：

import { useState, useEffect, useCallback } from "react"

// ...

const addTag = useCallback((newTag) => {
  setTagList(oldTagList => {
    if (!oldTagList.includes(newTag)) {
      return [...oldTagList, newTag];
    }
    return oldTagList;
  });
}, []); // 无需依赖tagList，因为用了函数式更新

useEffect(() => {
  generateCards();
}, [addTag]); // 加入addTag作为依赖

// ...

这样每次addTag更新时，useEffect会重新执行generateCards，让<Card>组件绑定最新的addTag函数，但上面的函数式更新方案已经能解决标签唯一性问题，这个优化可选。

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