React useState状态不更新问题：Tab列表中Checkbox无响应

问题根源 #

你把<WelcomeTab>组件实例直接存在了useState维护的tabs数组中，这会导致组件被“固化”在初始渲染的状态里。useState的初始值仅在组件首次挂载时计算一次，后续即使isTosChecked更新，tabs数组里的content依然引用着最初创建的WelcomeTab实例——它绑定的是初始状态下的isTosChecked和setIsTosChecked闭包，自然无法响应状态变化。

解决方案 #

方案一：存储组件配置而非实例 #

修改tabs数组，只保存组件类型和对应的props，在渲染时动态创建组件：

const [tabs, setTabs] = useState([
  {
    id:0, 
    name:"TOS", 
    component: WelcomeTab, 
    props: {title:'title', isChecked: isTosChecked, setIsChecked: setIsTosChecked}, 
    unviewed:0, 
    visible:false
  }, 
  // 其他Tab配置
])

渲染时动态生成组件：

{tabs.map(tab => 
  <div key={tab.id} className={tab === activeTab ? "tab selected" : "tab"}>
    <tab.component {...tab.props} />
  </div>
)}

这样每次渲染都会基于最新的isTosChecked创建WelcomeTab实例，确保绑定的状态和setter是最新的。

方案二：用useMemo动态生成tabs数组 #

如果需要保留直接存储组件实例的方式，可以用useMemo包裹tabs，将isTosChecked设为依赖项，确保状态变化时重新生成数组：

const tabs = useMemo(() => [
  {
    id:0, 
    name:"TOS", 
    content:(<WelcomeTab title='title' isChecked={isTosChecked} setIsChecked={setIsTosChecked}/>), 
    unviewed:0, 
    visible:false
  }, 
  // 其他Tab
], [isTosChecked])

当isTosChecked更新时，useMemo会重新执行回调生成新的tabs数组，其中的WelcomeTab实例也会绑定最新的状态和setter。

补充说明 #

直接在App的渲染结构中放置<WelcomeTab>时功能正常，是因为每次组件渲染都会重新创建WelcomeTab实例，自动绑定最新的状态；而存在useState中的组件实例只会在初始挂载时创建一次，后续不会随状态更新而重新生成，因此无法响应状态变化。

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