ReactJS中点击log Preview按钮如何展示指定form log数据

问题根因 #

现有代码的两个逻辑问题导致所有预览同时展示：

1. 预览显隐用了全局布尔值状态，没有区分当前触发点击的是哪个条目
2. 预览内容渲染时遍历了全量表单日志，没有做条目匹配过滤

具体修改点 #

• 替换原有全局控制显隐的布尔state：将类似const [showPreview, setShowPreview] = useState(false)的定义，改为存储当前激活预览条目ID的状态，初始值设为null：

  const [activePreviewId, setActivePreviewId] = useState(null);
  

• 修改Preview按钮的点击事件：点击按钮时传入当前条目的唯一标识（比如列表循环时每个form项自带的id字段），支持点击同个按钮切换展开/收起：

  <button
    onClick={() => {
      setActivePreviewId(prev => prev === formItem.id ? null : formItem.id)
    }}
  >
    log Preview
  </button>
  

• 调整预览区的渲染判断逻辑：删除原来统一判断showPreview就渲染所有预览的代码，改为仅当遍历到的条目ID和激活预览ID一致时，才渲染该条目对应的日志内容，注意预览内容直接取当前循环项的log字段即可，不要遍历全量表单数组取日志：

  {
    activePreviewId === formItem.id && (
      <div className="log-preview-area">
        <h4>Form Log Preview</h4>
        <pre>{JSON.stringify(formItem.logData, null, 2)}</pre>
      </div>
    )
  }
  

补充校验：改完后可以在点击按钮时打印activePreviewId，确认值和你点击的条目id一致，即可确保不会出现多预览同时展示的问题。

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