NextJS中如何通过组件点击展示博客文章详情？

问题根源分析 #

你当前的写法存在两个核心问题：

1. 遍历列表时为每个条目渲染一个ActivityModal，既浪费DOM资源，也容易导致状态管理混乱，即便props传递逻辑看似正确，也可能因Modal的显示状态未对应而出现undefined。
2. 按钮的onClick事件为空，没有触发Modal的显示逻辑，也未将当前条目的数据关联到Modal。

具体解决方案 #

1. 在Posts组件中统一管理Modal状态

将Modal的显示状态和当前选中的文章数据，作为Posts组件的状态进行管理，而非每个条目单独渲染Modal。

修改Posts.js的核心代码：

import { useState } from 'react';
import ActivityModal from './PostDetailsModal'; // 确保路径正确

function Posts() {
  // 新增状态：控制Modal显示/隐藏、存储选中的文章数据
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedActivity, setSelectedActivity] = useState(null);
  // 假设你已有currentItems、month等变量

  return (
    <div>
      <ul>
        {currentItems <= 0 ? (
          <span>You have no recent activity</span>
        ) : currentItems.length > 0 ? (
          currentItems.map((activity) => {
            const {
              id,
              user_id,
              description,
              amount,
              updateAt,
              date,
            } = activity;
            return (
              <li key={id}>
                <span>
                  <span>
                    <span>
                      {user_id ? <span>{description}</span> : null}
                      <span>{amount} </span>
                      <span>{month[updateAt]}&nbsp;{date}</span>
                    </span>
                  </span>
                </span>
                {/* 修改按钮点击事件：存储当前文章数据并打开Modal */}
                <button
                  type="button"
                  onClick={() => {
                    setSelectedActivity(activity);
                    setIsModalOpen(true);
                  }}
                >
                  Check Status
                </button>
              </li>
            );
          })
        ) : null}
      </ul>

      {/* 仅渲染一个Modal，传递状态和选中的数据 */}
      <ActivityModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        activity={selectedActivity}
      />
    </div>
  );
}

export default Posts;

2. 修改PostDetailsModal组件接收props

确保Modal组件正确接收并使用传递的props，同时根据isOpen状态控制显示：

// PostDetailsModal.js
export default function ActivityModal({ isOpen, onClose, activity }) {
  // 若未打开或无选中数据，不渲染内容
  if (!isOpen || !activity) return null;

  // 从选中的activity中解构所需属性
  const { id, user_id, amount, platform, my_name, followers } = activity;

  return (
    {/* 遮罩层，点击关闭Modal */}
    <div style={modalOverlayStyle} onClick={onClose}>
      {/* Modal内容区，阻止事件冒泡避免误关 */}
      <div style={modalContentStyle} onClick={(e) => e.stopPropagation()}>
        <button onClick={onClose}>Close</button>
        <h3>Activity Details</h3>
        <p>ID: {id}</p>
        <p>User ID: {user_id}</p>
        <p>Amount: {amount}</p>
        <p>Platform: {platform}</p>
        <p>Your Name: {my_name}</p>
        <p>Followers: {followers}</p>
      </div>
    </div>
  );
}

// 基础Modal样式（可根据需求调整）
const modalOverlayStyle = {
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  backgroundColor: 'rgba(0,0,0,0.5)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
};

const modalContentStyle = {
  backgroundColor: 'white',
  padding: '2rem',
  borderRadius: '8px',
  position: 'relative',
};

额外排查点 #

• 确认currentItems数组中的每个activity对象确实包含id、user_id等属性，可在map中添加console.log(activity)验证数据结构。
• 若使用类组件，将useState替换为this.state和this.setState即可，逻辑保持一致。

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