考虑到我们有很多 <IonCard> 个元素，仅在单击 <IonCardTitle> 时显示 <IonCardContent>

Question

从 API 请求中，我得到如下数据数组（我得到 100 个元素，但这里只显示 2 个）：

data: Array(2)
0: {cardId: 270, name: "Basic card" , type: "type1"}
1: {cardId: 345, name: "Special card" , type: "type2"}

我使用 map() 方法在我的应用程序中展示它们。每个数组元素都通过 <IonCard> 在应用程序中显示。卡名在<IonCardTitle>，卡类型在<IonCardContent>.

目前，根据我的实际实现，当我点击特定的<IonCardTitle>时，所有元素的内容都会打开。

我的目标是：单击特定元素标题时，仅打开该元素的内容。我怎样才能做到这一点？

任何帮助将不胜感激。

名片页面：

import {
  IonContent,
  IonPage,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardContent,
  IonItem,
  IonLabel,
  IonIcon,
} from "@ionic/react";
import React, { useEffect, useRef, useState } from "react";
import { Http} from "@capacitor-community/http";

const Cards: React.FC = () => {

  const [cards, setCards] = useState([]);
const [content, setContent] = useState([]);
const [showContent, setShowContent] = useState([]);
  const mounted = useRef(true);
     
  useEffect(() => {
    mounted.current = true;
    const options = {
      url: "xxx/cards",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    };
    Http.request({ ...options, method: "GET" }).then(
      (response) => {
        if (mounted.current) {
          setCards(response.data);
  
        }
      },
      (error) => {
        const _content =
          (error.response && error.response.data) ||
          error.message ||
          error.toString();

        setContent(_content);
      }
    );
    return () => {
      mounted.current = false;
    };
  }, []);

  return (
    <React.Fragment>
      <IonPage className="ion-page" id="main-content">
        <IonContent className="ion-padding">
       

          {cards &&
            cards.map((card: any) => (
              <IonCard key={card.cardId}>
                <IonCardHeader>
                  <IonCardTitle>
                    <IonItem
                      button
                      onClick={() => {
                        setShowContent(true);
                        if (showContent === true) {
                          setShowContent(false);
                        }
                      }}
                    >
                      <IonIcon
                        slot="end"
                        icon={showDetails ? arrowDown : arrowForward}
                      ></IonIcon>
                      <IonLabel>
                        <b>{card.name}</b>
                      </IonLabel>
                    </IonItem>
                  </IonCardTitle>
                </IonCardHeader>
                {showContent && (
                  <IonCardContent>
                      <p>Card Type: {card.type}</p>
                    </div>
                  </IonCardContent>
                )}
              </IonCard>
            ))}
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
};

export default Cards;

Answer 1

首先，更新初始状态：

const [showContent, setShowContent] = useState(null);

然后，更新onClick：

onClick={() => {
   setShowContent(card.cardId);
   if (showContent === card.cardId) {
     setShowContent(null);
   }
 }}

最终，更新条件渲染内容：

{showContent === card.cardId && (<IonCardContent>...</IonCardContent>)

考虑到我们有很多 <IonCard> 个元素，仅在单击 <IonCardTitle> 时显示 <IonCardContent>

Show <IonCardContent> only when clicking on <IonCardTitle>, considering that we have many <IonCard> elements

javascript

frontend

reactjs

ionic-framework

ionic-react