如何刷新React Functional Component？变量更新后视图不渲染怎么解决

问题根因 #

你声明的bundles_data是普通JavaScript变量，React函数组件的重渲染仅由响应式状态变更触发，普通变量的修改不会通知React执行渲染逻辑，因此视图无法同步最新值。

可行解决方案 #

• 方案1：将变量改为组件内部useState响应式状态（最推荐，符合React开发规范）
  示例代码：

  import { useState } from 'react';
  
  const SelectExistNFCType = (props) => {
    // 声明为响应式状态，初始值为空数组
    const [bundlesData, setBundlesData] = useState([]);
  
    const setAdd = async () => {
      // ...省略其他逻辑
      // 状态修改必须返回新数组，不可直接push修改原数组
      setBundlesData(prevState => [...prevState, ...data]);
      // ...省略其他逻辑
    }
  
    // 渲染时直接使用bundlesData，状态变更会自动触发重渲染
    return (
      <div>
        {bundlesData.map((item, index) => <div key={index}>{item}</div>)}
      </div>
    )
  }
  

• 方案2：跨组件共享数据场景，可使用状态管理方案
  如果bundles_data需要在多个组件间共享，可以选择useContext + useState的组合，或者Redux、Zustand、Jotai等第三方状态管理库，全局状态变更会自动触发依赖该状态的组件重渲染。
• 方案3：强制触发组件重渲染（不推荐，仅作为特殊场景兜底）
  如果你确实需要保留组件外部的普通变量声明，可以手动触发组件重渲染实现视图更新：

  import { useReducer } from 'react';
  
  let bundles_data = [];
  // 封装强制更新钩子
  const useForceUpdate = () => useReducer(count => count + 1, 0)[1];
  
  const SelectExistNFCType = (props) => {
    const forceUpdate = useForceUpdate();
  
    const setAdd = async () => {
      // ...省略其他逻辑
      data.forEach((value) => {
        bundles_data.push(value)
      })
      // 修改完普通变量后手动触发重渲染
      forceUpdate();
      // ...省略其他逻辑
    }
  
    return (
      <div>
        {bundles_data.map((item, index) => <div key={index}>{item}</div>)}
      </div>
    )
  }
  

额外优化建议：不要用map执行纯遍历插入操作，map设计用来生成新数组，纯遍历场景使用forEach语义更合理。

内容的提问来源于stack exchange，提问作者Kevin Christopher Ou