React Next.js项目如何将数组选中项传递给DestinationInfo组件

当前代码存在两个核心问题：

• 仅记录了模态框的开关状态，没有存储用户点击选中的具体目的地条目
• 给DestinationInfo组件传递的是整个DestinationInCountry数组，但组件内部是按单个对象读取属性，数组本身没有imageSrc字段，导致next/image组件的src参数为undefined触发报错。

1. 修改 DestinationCard.tsx #

调整状态存储逻辑，新增选中目的地的状态，点击卡片时将当前条目存入状态，再传递给详情组件：

import { NextPage } from "next";
import styles from "./DestinationCard.module.scss";
import Image from "next/image";
import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import DestinationInfo from '../destination-info/DestinationInfo';

const DestinationInCountry = [
  {
    imageSrc: "/images/offers/uk1.jpg",
    postTitle: "Lorem Ipsum",
    postDesc: "Lorem  Sit amet Lorem Ipsum Dolar Sit ametum Dolar Sit amet",
    destination: "London",
    price: "499",
    link: "/",
  },
  {
    imageSrc: "/images/offers/uk2.jpg",
    postTitle: "Lorem Ipsum",
    postDesc: "Lorem  Sit amet Lorem Ipsum Dolar Sit ametum Dolar Sit amet",
    destination: "London",
    price: "249",
    link: "/",
  },
];

const DestinationCard: NextPage = () => {
  const [open, setOpen] = useState(false);
  // 新增状态存储选中的目的地条目
  const [selectedDestination, setSelectedDestination] = useState<null | typeof DestinationInCountry[number]>(null);

  // 修改打开方法，接收选中的条目作为参数
  const openDestinationInfoCard = (item: typeof DestinationInCountry[number]) =>{
    setSelectedDestination(item);
    setOpen(true);
  }

  // 新增关闭模态框的方法
  const closeDestinationInfoCard = () => {
    setOpen(false);
    setSelectedDestination(null);
  }

  return (
    <>
    {open && selectedDestination ? (
      {/* 传入选中的单个条目和关闭方法 */}
      <DestinationInfo  
        DestinationInCountry={selectedDestination}
        onClose={closeDestinationInfoCard}
      />
    ) : ( 
      <div id="destinationCard" className={styles.main_wrapper}>
        <div className={styles.destination_grid}>
          {DestinationInCountry.map((item, index) => {
            return (
              {/* 点击时传入当前遍历的条目 */}
              <div 
                key={index} 
                className={styles.country_card}
                onClick={() => openDestinationInfoCard(item)}
              >
                <div className={styles.post_wrapper}>
                  <div className={styles.post_title}>{item.postTitle}</div>
                  <div className={styles.post_desc}>{item.postDesc}</div>
                  <Button>
                    <a> Read more  </a>
                  </Button>
                </div>
                <div  className={styles.img_wrapper}>
                <Image
                  src={item.imageSrc}
                  alt="world pinoy flights - destinations"
                  width={400}
                  height={400}
                />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    )}
   </>
  );
}

export default DestinationCard;

2. 修改 DestinationInfo.tsx #

完善类型定义，同时可以添加关闭按钮调用父组件传入的关闭方法：

import Image from "next/image";
import styles from './DestionationInfo.module.scss';
import Button from "@material-ui/core/Button";

// 定义目的地条目的类型
interface DestinationItem {
  imageSrc: string;
  postTitle: string;
  postDesc: string;
  destination: string;
  price: string;
  link: string;
}

export interface DestinationPlacesProps {
  DestinationInCountry: DestinationItem;
  onClose: () => void;
}

const DestinationInfo: React.FC<DestinationPlacesProps> = (props) => {
  return(
    <div className={styles.card_wrapper}>
      <Button onClick={props.onClose}>关闭</Button>
      <div>
        <Image
          src={props.DestinationInCountry.imageSrc}
          alt="world pinoy flights - destinations"
          width={400}
          height={400}
        />
        {/* 其他详情字段可以在这里按需渲染 */}
        <h2>{props.DestinationInCountry.postTitle}</h2>
        <p>{props.DestinationInCountry.postDesc}</p>
        <p>价格：¥{props.DestinationInCountry.price}</p>
      </div>
    </div>
  )
}

export default DestinationInfo;

修改完成后就能正常获取选中目的地的所有字段，不会再出现src缺失的报错。

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