如何防止 React 重新渲染来自 url 的图像？

Question

这就是我的应用程序现在的样子：

搜索和排序功能是动态工作的，只要我输入一个字母，它就会找到匹配项，但会重新呈现所有匹配项。

如果我输入“饥饿”，它会找到饥饿游戏电影，但它会在已有图像时获取图像并进行渲染。有没有办法让这个过程只进行一次，这样我就不用等待每次搜索、每次排序？我使用 Redux，因此数据来自商店，商店从本地 json 文件获取数据。

我考虑过存储在本地存储上，但我无法弄清楚。如您所见，没有 ComponentDidMount 或 Hooks。

这是该页面的代码：

import React from "react";
import "./MoviesAndSeries.css";
import ListShowItem from "./ListShowItem";
import { getVisibleShows } from "../Redux/Selector";
import { connect } from "react-redux";
import FilterShowItems from "./FilterShowItems";
const Movies: React.FC = (props: any) => {
  return (
    <div className="movies">
      <FilterShowItems />
      {props.movies.map((movie: any) => {
        return <ListShowItem key={Math.random()} {...movie} />;
      })}
    </div>
  );
};

const mapStateToProps = (state: any) => {
  return {
    movies: getVisibleShows(state.movies, state.filters),
    filters: state.filters,
  };
};

export default connect(mapStateToProps)(Movies);

Answer 1

您正在用作Math.random()密钥。键一直在变化，React 无法知道这些项是否已经存在，因此它会重新渲染所有项：

<ListShowItem key={Math.random()} {...movie} />;

将密钥更改为稳定且独特的内容，id例如电影（如果有的话）：

<ListShowItem key={movie.id} {...movie} />;