React中如何过滤嵌套数组内的问题数据？

需求背景 #

我已实现React中视频数组的标题过滤功能，但需要改为过滤嵌套在视频项内的questions数组——输入关键词时仅显示包含该词的问题。作为前端新手未找到合适教程，特此求助。

现有数据（videosData.js） #

[
    {
        "id": 1,
        "title": "Video 1",
        "video_leght": "00:50:00",
        "date": "20.05.2010",
        "questions": [
            {
                "id": 1,
                "question": "Question 1 ",
                "url": "Link"
              },
              {
                "id": 2,
                "question": "Question 2",
                "url": "Link"
              },
              {
                "id": 3,
                "question": "Question 3",
                "url": "Link"
              }         
        ]
    },
    {
        "id": 2,
        "title": "Video 2",
        "video_leght": "01:00:00",
        "date": "14.07.2016",
        "questions":[
            {
                "id": 1,
                "question": "Question 1 ",
                "url": "Link"
              },
              {
                "id": 2,
                "question": "Question 2",
                "url": "Link"
              },
              {
                "id": 3,
                "question": "Question 3",
                "url": "Link"
              }        
        ]
    }
]

现有代码 #

import React, { useState } from "react";
import Style from "./SearchResults.module.css";
import DataList from "../data/videosData";

function SearchResults() {
  const [search, setSearch] = useState("");

  return (
    <div className={Style.Body}>
      <div className={Style.Search_div}>
        <input
          className={Style.Textbox1}
          onChange={(e) => setSearch(e.target.value)}
        ></input>
        <button className={Style.Btn_Potrazi}>Trazi</button>
      </div>

      <div>
      {DataList.filter((item) => {
            return search.toLowerCase() === ""
              ? ""
              : item.title.toLowerCase().includes(search);
          })
          .map((item) => (
            <h2>{item.title}</h2>
          ))}
      </div>
    </div>
  );
}

export default SearchResults;

解决方案 #

要实现嵌套questions数组的过滤，需要调整两个核心逻辑：

1. 对每个视频的questions数组单独过滤，只保留匹配关键词的问题
2. 控制视频显示：搜索词为空时显示所有视频和问题；搜索词存在时，仅显示包含匹配问题的视频及对应问题

修改后完整代码 #

import React, { useState } from "react";
import Style from "./SearchResults.module.css";
import DataList from "../data/videosData";

function SearchResults() {
  const [search, setSearch] = useState("");
  const lowercasedSearch = search.toLowerCase().trim();

  // 先处理每个视频的问题过滤，再过滤有匹配问题的视频
  const filteredVideos = DataList
    .map(video => {
      const filteredQuestions = lowercasedSearch
        ? video.questions.filter(question =>
            question.question.toLowerCase().includes(lowercasedSearch)
          )
        : video.questions;

      return { ...video, questions: filteredQuestions };
    })
    .filter(video => lowercasedSearch === "" || video.questions.length > 0);

  return (
    <div className={Style.Body}>
      <div className={Style.Search_div}>
        <input
          className={Style.Textbox1}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="输入关键词搜索问题..."
        />
        <button className={Style.Btn_Potrazi}>搜索</button>
      </div>

      <div>
        {filteredVideos.map(video => (
          <div key={video.id} className={Style.VideoItem}>
            <h2>{video.title}</h2>
            <ul>
              {video.questions.map(question => (
                <li key={question.id}>
                  <a href={question.url}>{question.question}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

export default SearchResults;

关键逻辑说明 #

• 统一处理搜索词：转为小写并去除首尾空格，避免大小写敏感和无效空格干扰
• 嵌套数组过滤：用map遍历每个视频，对其questions数组做过滤，保留匹配项
• 视频过滤：用filter筛选视频，只有搜索词为空，或视频存在匹配问题时才保留
• 渲染优化：给input添加value绑定和占位符，确保受控组件特性；用列表展示问题，结构更清晰

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