ReactJS中如何基于异步Props初始化带动态键的状态？

我之前在项目里用react-md处理过类似的异步props+动态弹窗场景，给你整理一套落地性强的实现思路：

1. 核心思路梳理 #

• 用对象类型的状态存储每个弹窗的显示状态，键用列表项的唯一标识（比如id），这样能精准控制单个弹窗的显隐
• 通过useEffect监听异步获取的Props变化，在数据加载完成后初始化所有弹窗的默认隐藏状态
• 点击列表项时更新对应键的状态为true触发弹窗，弹窗的onHide回调再把对应状态设为false

2. 完整代码实现 #

import { useState, useEffect } from 'react';
import { DialogContainer, Button, List, ListItem } from 'react-md';

const DynamicDialogComponent = ({ items }) => {
  // 存储每个弹窗的显示状态，键为item的id
  const [dialogVisibles, setDialogVisibles] = useState({});
  // 可选：处理数据加载中的状态
  const [isLoading, setIsLoading] = useState(true);

  // 监听异步props，初始化弹窗状态
  useEffect(() => {
    if (items && items.length > 0) {
      const initialVisibles = items.reduce((acc, item) => {
        acc[item.id] = false;
        return acc;
      }, {});
      setDialogVisibles(initialVisibles);
      setIsLoading(false);
    }
  }, [items]);

  // 点击列表项，打开对应弹窗
  const handleItemClick = (itemId) => {
    setDialogVisibles(prev => ({ ...prev, [itemId]: true }));
  };

  // 关闭弹窗
  const handleDialogHide = (itemId) => {
    setDialogVisibles(prev => ({ ...prev, [itemId]: false }));
  };

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <List>
        {items.map(item => (
          <ListItem
            key={item.id}
            onClick={() => handleItemClick(item.id)}
            style={{ cursor: 'pointer', padding: '12px' }}
          >
            {item.title}
          </ListItem>
        ))}
      </List>

      {/* 渲染所有弹窗，根据visible状态控制显示 */}
      {items.map(item => (
        <DialogContainer
          key={item.id}
          visible={dialogVisibles[item.id]}
          onHide={() => handleDialogHide(item.id)}
          title={item.title}
          actions={
            <Button onClick={() => handleDialogHide(item.id)}>关闭</Button>
          }
        >
          <p>{item.content}</p>
        </DialogContainer>
      ))}
    </div>
  );
};

export default DynamicDialogComponent;

3. 关键细节说明 #

• 动态状态管理：用对象存储每个弹窗的visible状态，避免了多个独立state的冗余，同时能通过唯一标识精准定位到需要控制的弹窗
• 异步Props处理：通过useEffect监听items的变化，确保只有当异步数据加载完成后才初始化状态，避免了初始状态为空导致的错误
• react-md弹窗适配：严格遵循react-md的DialogContainerAPI，用visible控制显示，onHide处理关闭逻辑，同时可以自定义弹窗标题、内容和操作按钮
• 性能优化：因为每个弹窗是基于items渲染的，配合React的diff算法，只会更新状态变化的弹窗，不会造成不必要的重渲染

如果你有特殊的弹窗内容定制需求，只需要修改DialogContainer内部的内容即可，整体的状态控制逻辑是通用的~

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