Reactstrap collapse 打开一个折叠按钮，一切都会打开

问题描述

这是我的代码，如何使用带有映射数据的折叠，每次折叠使用 id 打开和关闭

我想在开始时打开第一个折叠，当该模态框打开并在每次折叠时分别打开和关闭。

感谢提前。

import React,{ useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  Button,Row,Card,CardHeader,Collapse,CardBody,Col,Modal,ModalBody
} from 'reactstrap';

export const CustomerList = () => {
 
 const data = [
            {'email': "[e-mail]"
              'name': "Right"
               'notes': "Gm notes"
              'phone': "12"
               'title': "Gm title"
              _id: "6051898a986a3a17986a0fb9"
            },{'email': "[e-mail]"
            'name': "ght"
            'notes': "Gm notes"
            'phone': "12"
            'title': "Gm title"
            _id: "6051898a986a3a17986a0fb9"
            }
         ]
  const [isCustomerModalOpen,setIsCustomerModalOpen] = useState(false);
  const [isOpen,setIsOpen] = useState(false);


  const viewContacts = async id => {
    setIsCustomerModalOpen(true);   
        setIsOpen(!isOpen);    
  };



  return (
         <div>
          <Button
            onClick={() => viewContacts()}
          >
            <FontAwesomeIcon icon="eye" />
          </Button>

      <Modal
        toggle={() => setIsCustomerModalOpen(!isCustomerModalOpen)}
        isOpen={isCustomerModalOpen}
      >
        {data.map(da => {
          return (
            <Card className="mb-0">
              <CardHeader id="headingOne">
                <h1>{da.name}</h5>
                </h1>
              </CardHeader>
              <Collapse isOpen={isOpen}>
                <CardBody>
                  <p>{da.name}</p>
                  <p>{da.email}</p>
                  <p>{da.phone}</p>
                  <p>{da.title}</p>
                  <p>{da.notes}</p>
                </CardBody>
              </Collapse>
            </Card>
          );
        })}
      </Modal>
    </div>
  );
};

我想在开始时打开第一个折叠，当该模态框打开并在每次折叠时分别打开和关闭。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）