Reactstrap卡片组件动态数据显隐问题：点击单张卡片全部展开

嘿，我知道你遇到的问题啦——点击单张卡片结果所有卡片都展开，这是因为你大概率用了单个状态变量（比如isOpen）来控制所有卡片的显示/隐藏，所以这个状态一变，所有卡片都会跟着切换状态。咱们来调整一下状态管理，让每张卡片能独立控制展开收起～

核心思路 #

给每张卡片维护独立的展开状态，常见的两种实现方式：

• 方式1：在state中记录当前展开的卡片ID，点击时对比ID来决定是否显示对应卡片的详情
• 方式2：给每个installer对象添加一个isExpanded属性（如果允许修改原数据的话）

这里推荐方式1，更灵活且不污染原数据，下面是具体的代码修改步骤：

1. 初始化状态 #

首先在组件的state里新增一个变量，用来存当前展开的卡片ID：

constructor(props) {
  super(props);
  this.state = {
    Installers: [],
    expandedInstallerId: null // 初始为null，代表没有卡片展开
  };
}

2. 修改toggle函数 #

修改toggle函数，让它点击时切换当前展开的卡片ID：

toggle = (installer) => {
  // 如果当前点击的卡片已经展开，就关闭它；否则展开它
  this.setState(prevState => ({
    expandedInstallerId: prevState.expandedInstallerId === installer.id ? null : installer.id
  }));
};

3. 调整渲染逻辑 #

遍历卡片时，根据expandedInstallerId判断当前卡片是否应该展开详情，同时给每个Card加上唯一的key（避免React警告）：

{this.state.Installers.map((installer, index) => (
  <Card 
    key={installer.id || index} // 优先用installer的唯一ID，没有的话用index
    onClick={() => this.toggle(installer)}
  >
    {installer.firstname_en}
    {/* 只有当前卡片ID和expandedInstallerId一致时，才显示详情 */}
    {this.state.expandedInstallerId === installer.id && (
      <div className="col-md-12">
        <Card>
          <div className="col-md-7">
            <label 
              htmlFor="firstName" 
              className="fname" 
              style={{ fontFamily: "Roboto" }}
            >
              First Name : {installer.firstname} {/* 你原来的data应该是当前installer吧？这里修正一下 */}
            </label>
          </div>
          <div className="col-md-7">
            <label 
              htmlFor="lastName" 
              className="lname" 
              style={{ fontFamily: "Roboto"}}
            >
              Last Name : {installer.lastname}
            </label>
          </div>
        </Card>
      </div>
    )}
  </Card>
))}

几个小提醒 #

• 尽量给每个installer分配一个唯一的id属性，用index当key虽然可行，但如果数组有增删、排序操作，可能会导致React渲染异常
• 你原来代码里的data变量应该是笔误，我改成了当前遍历的installer，如果不是的话你可以根据实际情况调整
• 用箭头函数定义toggle后，就不需要手动bind上下文了，更简洁

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