React中useState的dataArr状态丢失问题求助

问题背景 #

我正在开发一个展示在线社区最新3条注册用户活动的信息面板：通过API拉取30条最新注册数据，转成JSX组件数组存入dataArr state，再用useEffect截取最后3条存入results用于展示。现在需要实现自动移除dataArr最后一项并添加动画，但点击动态生成的JSX元素调用testAction时，dataArr为空；点击静态JSX元素调用则正常，用setInterval调用时也会出现dataArr为空的情况。

核心原因 #

1. 闭包陷阱：你在API请求后提前生成了所有JSX组件并存入dataArr，这些组件的onClick绑定的testAction是组件第一次渲染时的版本，捕获的是当时的空dataArr。后续dataArr更新后，已生成的JSX组件不会重新创建，点击时依然使用旧闭包，拿不到最新state。
2. 错误的state存储方式：React的state应该存储原始数据，而非已生成的JSX元素。把JSX存在state里会导致组件无法随state更新重新渲染，函数闭包也无法捕获最新状态。
3. 直接修改state数组：testAction里用dataArr.pop()直接修改原数组，违反React不可变原则，会导致状态更新不触发重新渲染，或状态不一致。

解决步骤 #

1. 将state改为存储原始数据

修改useState和API请求逻辑，只存接口返回的原始用户数据，不提前生成JSX：

const [dataArr, setDataArr] = useState([])
// ...
useEffect(() => {
  axios
    .get(`/api/XXXXXXXXXXXXXXX/latestactivity`)
    .then((response) => {
      setTest('test text')
      // 仅存储原始数据，不生成JSX
      setDataArr(response.data)
    })
    .catch((err) => {
      console.log('Error getting latest featured activity: ', err)
    })
}, [])

2. 渲染时动态生成JSX组件

将LatestActivityComponent移至组件内部（或外部），在渲染阶段根据dataArr动态生成组件：

// 定义组件（可移至组件外部避免重复创建）
const LatestActivityComponent = forwardRef(
  ({ u, country, activityType, color, activityText }, ref) => {
    return (
      <LatestActivityWrapper ref={ref}>
        <LatestActivityTitle color={color} size="18px">
          {activityType}
        </LatestActivityTitle>
        <ActivityName>
          <BreakSubActivity onClick={() => testAction()}>
            <b>Name:</b>
          </BreakSubActivity>
          <BreakSubActivityRight>{u}</BreakSubActivityRight>
        </ActivityName>
        <ActivityName>
          <BreakSubActivity>
            <b>Location:</b>
          </BreakSubActivity>
          <BreakSubActivityRight>{country}</BreakSubActivityRight>
        </ActivityName>
        <ActivityText>{activityText}</ActivityText>
      </LatestActivityWrapper>
    )
  }
)

// 在渲染时动态生成结果
const results = dataArr.slice(dataArr.length - 3, dataArr.length).map((d, index) => (
  <LatestActivityComponent
    key={index}
    u={d.forename}
    country={d.country.nicename}
    activityType={'SIGNUP'}
    color={'#3DBD7E'}
    activityText={`${d.forename} signed up from ${d.country.nicename}`}
  />
))

3. 修改testAction，使用函数式更新遵循不可变原则

函数式更新可以获取最新state值，避免闭包问题，同时不直接修改原数组：

const testAction = () => {
  setDataArr(prevData => {
    // 复制原数组并移除最后一项（slice不修改原数组）
    const newData = prevData.slice(0, prevData.length - 1)
    console.log('newData length: ', newData.length)
    return newData
  })
}

4. 处理setInterval自动更新场景（可选）

如果需要自动移除数据，用useRef保存定时器，结合函数式更新避免闭包问题：

useEffect(() => {
  const timer = setInterval(() => {
    setDataArr(prevData => {
      // 保留至少3条数据
      if (prevData.length <= 3) return prevData
      return prevData.slice(0, prevData.length - 1)
    })
  }, 5000) // 5秒执行一次

  // 组件卸载时清除定时器，避免内存泄漏
  return () => clearInterval(timer)
}, [])

效果说明 #

修改后，每次dataArr更新都会重新生成LatestActivityComponent，绑定的testAction会捕获最新state，点击动态组件或触发定时器时都能拿到正确的dataArr值。

内容的提问来源于stack exchange，提问作者N.Widds