ReactJS中包含数组成员的状态对象调用setState未正常更新问题求助

问题根因 #

这是React典型的闭包陷阱问题，核心错误是将React组件实例直接存储在state中：

• 调用showPopup创建Notification组件时，绑定的handleClose是当前渲染周期的闭包版本，这个闭包里捕获的state永远是创建弹窗那一刻的state值
• 后续state更新后，已经存在state里的旧Notification实例不会更新绑定的handleClose，所以点击关闭时拿到的state.array永远是初始空数组

修复方案 #

无需修改Notification.tsx，仅调整App.tsx的存储和渲染逻辑即可：

调整state存储逻辑 #

不要在state中存储组件实例，改为存储弹窗的元数据（配置信息），渲染时再动态生成组件，从根源避免闭包绑定问题。

完整修复后的App.tsx代码 #

import React, { useState } from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import Notification from './Notification';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

// 弹窗元数据类型
interface PopupConfig {
  handle: number;
  title: string;
  body: string;
}

interface stateType {
  index: number;
  unused?: number;
  array: PopupConfig[];
}

const App: React.FC = () => {
  const [state, setstate] = useState<stateType>({
    index: 1,
    array: []
  })

  const handleClose = (ok: boolean, handle: number) => {
    // 使用函数式更新，总能拿到最新的state值，进一步规避闭包问题
    setstate(prevState => {
      const newArray = prevState.array.filter(item => item.handle !== handle);
      return { ...prevState, array: newArray }
    })
  }

  const showPopup = () => {
    console.log("show popup");
    const idx = state.index + 1
    // 仅存储弹窗配置，不生成组件实例
    const newPopup: PopupConfig = { handle: idx, title: 'TEST', body: 'BODY' }
    const newArray = [...state.array, newPopup]
    console.log("new array in show popup = ", newArray)
    setstate({ ...state, index: idx, array: newArray })
  }

  return (
    <>
      <Form>
        <Button className="mr-sm-2" onClick={showPopup}>Popup button</Button>
      </Form>
      {/* 渲染时动态生成Notification组件，绑定最新的handleClose */}
      {state.array.map(popup => (
        <Notification 
          key={popup.handle} 
          handleClose={handleClose} 
          title={popup.title} 
          body={popup.body} 
          handle={popup.handle}
        />
      ))}
    </>
  );
}

export default App;

额外优化说明 #

• 用弹窗唯一标识handle作为列表渲染的key，比用数组索引更稳妥，避免数组顺序变化时出现渲染异常
• setState使用函数式更新写法，无论什么时候调用都能拿到最新的state值，进一步规避闭包导致的state过期问题

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