React嵌套数组渲染技巧与去重方法

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《React嵌套数组渲染与组件重复解决方法》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

本文旨在解决React应用中，当处理包含嵌套对象数组（如电影及其放映时间）的数据时，因不当使用`Array.prototype.map()`导致父组件重复渲染的问题。我们将深入探讨`map()`与`some()`方法的区别及其适用场景，并提供一种高效且正确的渲染逻辑，确保每个电影组件仅渲染一次，同时仍能展示其所有符合条件的子项。

在React开发中，处理复杂数据结构，尤其是包含嵌套数组的对象集合，是常见的任务。一个典型的场景是电影列表应用，其中每部电影对象包含一个放映时间数组。当需要根据特定日期筛选并显示电影时，开发者可能会遇到一个问题：如果一部电影在给定日期有多个放映时间，那么代表该电影的父组件（例如MovieShow）可能会被重复渲染多次。

问题描述：组件重复渲染的根源

假设我们有一个movies数组，每个movie对象中包含一个shows数组，代表该电影的不同放映时间。我们的目标是根据用户选择的date状态，显示所有在该日期有放映的电影。

原始的MovieList组件可能采用了以下逻辑来渲染电影：

import useMovieContext from "../../hooks/useMovieContext";
import MovieShow from "./MovieShow";

export default function MovieList() {
  const { movies, date } = useMovieContext();

  const renderedList = movies?.map((movie) =>
    // 遍历每个电影的放映时间
    movie.shows.map((show) => {
      // 如果放映时间日期匹配，则渲染MovieShow组件
      if (show.date === date) {
        return <MovieShow key={movie.imdbID} movie={movie} link="showtimes" />;
      }
      // 如果不匹配，这里隐式返回 undefined
    })
  );

  return <div>{renderedList}</div>;
}

这段代码的问题在于，外层的map遍历每个电影，而内层的map则遍历该电影的所有放映时间。如果一部电影（例如“Inception”）在"12th June"有三个放映时间，那么内层的map会为这三个匹配的show对象各返回一个MovieShow组件。结果就是，renderedList会包含一个包含MovieShow组件和undefined值的嵌套数组，最终导致“Inception”这部电影的MovieShow组件被渲染三次。React在渲染数组时会忽略undefined或null，但重复的组件依然会被创建并显示。

理解Array.prototype.map()与Array.prototype.some()的区别

要解决上述问题，我们需要理解map()和some()这两个数组方法的根本区别及其适用场景。

• Array.prototype.map():

  • 用途: 遍历数组中的每个元素，并对每个元素执行回调函数，然后将回调函数的返回值组成一个新的数组。
  • 返回: 一个新数组，其长度与原数组相同。
  • 何时使用: 当你需要将一个数组的每个元素“转换”成另一个值或JSX元素时。

• Array.prototype.some():

  • 用途: 检查数组中是否“至少有一个”元素满足提供的测试函数。
  • 返回: 一个布尔值 (true 或 false)。如果找到一个满足条件的元素，立即返回true，不再继续检查；如果遍历完所有元素都没有找到，则返回false。
  • 何时使用: 当你只需要判断数组中是否存在某个元素满足特定条件，而不需要转换或获取这些元素时。

在我们的场景中，MovieList组件的职责是决定“哪些电影应该被显示”，而不是“显示每个电影的每个匹配放映时间”。因此，我们只需要检查一部电影是否“存在”至少一个符合条件的放映时间，而不是为每个匹配的放映时间都渲染一次电影组件。

解决方案：利用some()进行条件判断

正确的做法是，在外层map遍历电影时，使用some()方法来检查当前电影的shows数组中是否存在任何一个放映时间与选定日期匹配。如果存在，则只渲染一次MovieShow组件。

以下是修改后的MovieList组件代码：

import useMovieContext from "../../hooks/useMovieContext";
import MovieShow from "./MovieShow";

export default function MovieList() {
  const { movies, date } = useMovieContext();

  const renderedList = movies?.map((movie) => {
    // 使用some()检查当前电影是否有任何一个放映时间匹配选定日期
    const hasMatchingShowtime = movie.shows.some((show) => show.date === date);

    // 如果存在匹配的放映时间，则只渲染一次MovieShow组件
    if (hasMatchingShowtime) {
      return <MovieShow key={movie.imdbID} movie={movie} link="showtimes" />;
    }
    // 如果没有匹配的放映时间，则不返回任何东西（React会忽略 undefined）
    return null; // 或者直接不写return，效果相同
  });

  return <div>{renderedList}</div>;
}

通过引入hasMatchingShowtime这个布尔变量，我们确保了对于每个电影，MovieShow组件只会在满足条件时被渲染一次。如果一部电影在"12th June"有三个放映时间，some()会立即返回true，然后MovieList只会为该电影渲染一个MovieShow组件。

MovieShow组件内部的渲染逻辑

值得注意的是，MovieShow组件内部仍然需要遍历movie.shows来显示所有匹配的放映时间（例如通过MovieTimes组件）。这部分逻辑是正确的，因为它是在一个已经确定要显示的电影组件内部，负责展示该电影的详细信息，包括所有符合条件的放映时间。

import "../../CSS/Movies/MovieShow.css";
import { Link } from "react-router-dom";
import MovieTimes from "../MoviePage/MovieTimes"; // 假设这个组件用于显示单个放映时间
import useMovieContext from "../../hooks/useMovieContext";

export default function MovieShow({ movie, link }) {
  const { date } = useMovieContext();

  // 在MovieShow内部，我们确实需要遍历所有放映时间来显示符合条件的MovieTimes
  const renderedTimes = movie.shows?.map((show) => {
    if (show.date === date) {
      return <MovieTimes key={show.startTime + show.date} show={show} movie={movie} />;
    }
    return null; // 不匹配的放映时间不渲染
  });

  return (
    <div className="movie-container">
      <img className="movie-poster" src={movie.poster} alt="" />
      <div className="movie-details">
        <h1>{movie.title}</h1>
        <h2>Rated: {movie.rated}</h2>
        <h3>Running Time: {movie.runtime}</h3>
        <h3>Date: {new Date().toDateString().substring(4)}</h3>
        <Link state={{ movie: movie }} to={`/${link}/${movie._id}`}>
          <button>More Details</button>
        </Link>
        <div className="movie-times-list">{renderedTimes}</div> {/* 这里渲染的是多个MovieTimes */}
      </div>
    </div>
  );
}

请注意，MovieTimes组件的key应该基于其唯一性，例如show.startTime + show.date，以确保在列表更新时React能够正确识别元素。

总结与最佳实践

这个案例突出了一项重要的React和JavaScript开发原则：选择正确的数组迭代方法来匹配你的意图。

• map() 用于转换和渲染列表：当你需要将数组中的每个元素转换成一个新的元素（通常是JSX元素）并渲染一个列表时使用。
• some() 用于条件判断：当你只需要检查数组中是否存在满足特定条件的元素，并基于此进行逻辑判断（如条件渲染）时使用。
• filter() 用于创建子集：当你需要从数组中筛选出满足特定条件的所有元素，形成一个新数组时使用。

通过精确地使用这些方法，我们不仅解决了组件重复渲染的问题，还使得代码意图更加清晰，提高了应用性能和可维护性。在处理复杂的嵌套数据结构时，务必仔细思考每个层级的迭代目标，从而避免不必要的渲染和潜在的bug。

以上就是《React嵌套数组渲染技巧与去重方法》的详细内容，更多关于的资料请关注golang学习网公众号！