React中点击按钮如何将数组指定元素传递给Modal模态框

当前写法存在两个核心问题：

• 在map循环里为每一行设备都渲染了一个绑定DEVICE_INFO_MODAL标识的DeviceInfoModal组件，所有模态框共用同一个显隐状态，触发显示时所有实例都会被打开，最后挂载的数组最后一项对应的模态框会盖在最上层，所以永远只显示最后一条数据。
• 代码里写的{...console.log(entry)}属于无效写法，console.log返回值是undefined，展开后不会传入任何有效属性，仅会在控制台打印日志。

1. 移除循环内的模态框渲染 #

把map循环内部写的<DeviceInfoModal />整个删掉，移到和表格同级的组件外层位置，保证整个页面只渲染1个设备信息模态框实例，不要放在循环里重复渲染。

2. 点击按钮时传入当前设备条目 #

两种实现方式选其一即可：

• 方式一（适配modalConnect的原生能力）：调用showModal时直接把当前entry作为第二个参数传入，modalConnect会自动把参数注入到模态框组件的props中：

<IconButton
  category="action"
  icon={<IconInformationFill />}
  onPress={() => dispatch(modalActions.showModal(DEVICE_INFO_MODAL, { entry }))}
  size="sm"
  variant="text"
/>

• 方式二（通用兼容方案，不依赖模态框封装能力）：在组件内新增本地state存储当前选中的设备条目，点击按钮时先赋值再打开模态框：

// 组件顶层新增state
const [selectedDevice, setSelectedDevice] = useState(null);

// 修改按钮点击逻辑
onPress={() => {
  setSelectedDevice(entry);
  dispatch(modalActions.showModal(DEVICE_INFO_MODAL));
}}

// 外层渲染模态框时传入state
<DeviceInfoModal entry={selectedDevice} />

3. 清理模态框内的无效代码 #

把DeviceInfoModal组件里所有{...console.log(...)}这类调试用的无效展开代码全部删除，这类写法没有任何业务作用，还可能触发不必要的重渲染。

改完后点击按钮时，只会打开唯一的模态框实例，且接收到的是当前点击设备对应的entry数据，就能正确展示对应设备的信息了。

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