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

Question

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

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

如果我输入“饥饿”，它会找到饥饿游戏电影，但它会在已有图像时获取图像和渲染。有没有办法让这个过程只做一次，这样我就不用等待每次搜索、每次排序？我使用 Redux，所以数据来自 store，store 从本地 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} />;