React.js调用setState()时变量被清空的原因及解决方法

云原生阿岚

2026-8-26

问题原因

两个异常的核心根源是两个React基础概念的误用：

跨渲染数据存储错误：你把filteredTags定义为组件内部的普通局部变量，而非响应式状态。React组件只要触发状态更新（比如你调用setFilteredCards）就会重新执行整个组件函数，每次执行到let filteredTags = []都会把这个变量重置为空数组，根本不会保留上一次点击存入的标签值。
你之前没取消setFilteredCards注释时打log看起来正常，是因为那行状态更新代码被注释了，点击标签不会触发组件重渲染，局部变量没被重置，同一次函数执行里的push、filter操作结果自然是对的。一旦放开注释触发重渲染，变量立刻被清空，就会出现「每次点击前列表都被清空，只剩最后一次点击项」的问题。
状态更新异步特性导致的值滞后：React的状态更新是异步批处理的，调用setState后不会立刻同步修改状态值，同时你本身存储标签的变量每次重渲染都会重置，传入setFilteredCards的参数本身就是不完整的，最终就会出现filteredCards永远存着上一次点击内容、滞后一次的现象。

修复方案

核心修改点两个：一是把需要跨渲染保留的选中标签列表改为响应式状态存储，二是更新状态时使用函数式更新写法，拿到准确的上一次状态值，避免闭包旧值、变量重置的问题。
修复后的核心代码如下：

function Homepage() {
  const [cards, setCards] = useState([]);
  const [filteredCards, setFilteredCards] = useState([]);
  // 把选中标签改为状态存储，初始值为空数组
  const [selectedTags, setSelectedTags] = useState([]);

  function toggleSingleTag(tagValue) {
    // 用函数式更新基于上一次的最新标签值计算新状态
    setSelectedTags(prevTags => {
      let newTags;
      if (!prevTags.includes(tagValue)) {
        newTags = [...prevTags, tagValue];
      } else {
        newTags = prevTags.filter(elem => elem !== tagValue);
      }
      
      // 标签更新后同步过滤卡片，这里的过滤逻辑可以根据你的需求调整
      setFilteredCards(cards.filter(card => {
        // 示例逻辑：没有选中标签时展示所有卡片，有选中标签时展示匹配任意选中标签的卡片
        return newTags.length === 0 
          ? true 
          : newTags.some(tag => card.tags.includes(tag));
      }))

      return newTags;
    })
  }

  // 标签按钮渲染时直接把标签值作为参数传入，不要依赖e.target.innerHTML取值，避免DOM结构变动拿错值
  // 示例：<button onClick={() => toggleSingleTag(tag)}>{tag}</button>
}

额外优化提示：

所有跨组件重渲染周期需要保留、会影响UI渲染的数据，都必须存在state中，普通局部变量的生命周期仅在单次组件函数执行范围内，重渲染后就会被重置。
新的状态值依赖旧状态值时，优先使用函数式更新的写法，避免闭包缓存旧状态导致更新错误。
取值时尽量不要依赖e.target.innerHTML这类DOM属性，直接把业务值作为参数传入事件处理函数更稳定。

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