React新手求助：点击视频后无法展示对应视频的问答列表

核心思路 #

用React的useState状态记录当前选中的视频ID，根据这个ID过滤JSON数据，只渲染对应视频的问答内容。

分步修改代码 #

1. 先确认你的JSON数据结构（可对应自己的结构调整） #

// 示例data.json结构
[
  {
    "videoId": "abc123",
    "title": "React入门教程",
    "questions": [
      {
        "id": 1,
        "text": "函数组件和类组件有啥区别？",
        "timestamp": "150" // 对应YouTube的?t=150参数
      }
    ]
  },
  {
    "videoId": "def456",
    "title": "React状态管理详解",
    "questions": [
      {
        "id": 2,
        "text": "useState怎么更新复杂数据？",
        "timestamp": "280"
      }
    ]
  }
]

2. 修改App.js - 管理选中视频状态 #

import { useState } from 'react';
import Card from './Card';
import Pitanja from './Pitanja';
import videoData from './data.json'; // 导入你的问答JSON

function App() {
  // 记录当前选中的视频ID，初始为null（无选中状态）
  const [selectedVideoId, setSelectedVideoId] = useState(null);

  // 点击视频卡片时触发的函数
  const handleVideoClick = (videoId) => {
    // 点击已选中的视频则取消选中，否则切换选中目标
    setSelectedVideoId(prevId => prevId === videoId ? null : videoId);
  };

  // 过滤出当前选中视频的问答数据
  const currentQuestions = selectedVideoId 
    ? videoData.find(video => video.videoId === selectedVideoId).questions 
    : [];

  return (
    <div className="App">
      {/* 视频列表区域 */}
      <div className="video-cards">
        {videoData.map(video => (
          <Card 
            key={video.videoId}
            video={video}
            onClick={() => handleVideoClick(video.videoId)}
            isActive={selectedVideoId === video.videoId} // 标记选中状态
          />
        ))}
      </div>

      {/* 问答列表：仅选中视频时渲染 */}
      {selectedVideoId && (
        <Pitanja 
          questions={currentQuestions}
          videoId={selectedVideoId} // 用于生成YouTube时间戳链接
        />
      )}
    </div>
  );
}

export default App;

3. 修改Card.js - 接收点击事件与选中状态 #

function Card({ video, onClick, isActive }) {
  return (
    <div 
      className={`video-card ${isActive ? 'active' : ''}`}
      onClick={onClick} // 绑定点击事件
    >
      <h3>{video.title}</h3>
      {/* 这里放你的视频缩略图、简介等内容 */}
    </div>
  );
}

export default Card;

4. 修改Pitanja.js - 渲染问答与时间戳链接 #

function Pitanja({ questions, videoId }) {
  return (
    <div className="questions-wrapper">
      <h2>该视频问答</h2>
      <ul>
        {questions.map(question => (
          <li key={question.id}>
            {/* 生成带时间戳的YouTube跳转链接 */}
            <a 
              href={`https://www.youtube.com/watch?v=${videoId}&t=${question.timestamp}s`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {question.text}
            </a>
            <span>@{question.timestamp}秒</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Pitanja;

关键逻辑解释 #

• 状态管理：selectedVideoId是核心状态，点击视频时更新它，React会自动触发组件重新渲染。
• 数据过滤：用find方法从JSON中匹配选中的视频，提取对应的问答数组，传给Pitanja组件。
• 条件渲染：{selectedVideoId && <Pitanja ... />}确保只有选中视频后才显示问答列表。
• 组件通信：通过props把点击事件、数据在父子组件间传递，实现交互逻辑的联动。

可选样式优化 #

给选中的视频卡片加高亮样式，方便用户识别：

.video-card.active {
  border: 2px solid #ff0000;
  background-color: #f5f5f5;
}

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