如何防止反应重新渲染来自 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() 键。 key 一直在变化，React 无法知道这些 item 是否已经存在，所以它会重新渲染所有的：

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

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

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