嵌套地图中的反应功能组件多次重新渲染答案

【问题标题】：React functional component in nested maps rerender multiple times嵌套地图中的反应功能组件多次重新渲染
【发布时间】：2021-05-14 16:16:12
【问题描述】：

我有三个组件，App、Movies 和 Input

在电影中，它显示电影详细信息并呈现每部电影的输入字段。

export default function Movies(props) {
  console.log("HOW MANY TIMES")
  return (
    <div className="movies">
    {props.movies && props.movies.map(m=> <section>
    <span>{m.name}</span>
    {m.actors.map(a=>(<div>
    <div>{a.name}</div>
    <div>{props.salaryChildren && React.cloneElement(props.salaryChildren, {id: m.id})}</div>

我的应用组件按类型呈现电影

export default function App(props) {
  const library = [
    {
      id: 5,
      name: "A",
      type: "blockbuster",
      movies: [
        {
          id: 5,
          name: "Cast away",
          actors: [{ name: "Tom Hanks" }, { name: "Actor B" }]
        }
      ]
    }
  ];
  const renderByType = (type) => {
    if (type === "blockbuster") {
      return <input />;
    }
  };
  return (
    <>
      {library.map((l) => (
        <div>
          <Movies movies={l.movies} salaryChildren={renderByType(l.type)} />
        </div>
      ))}
    </>
  );
}
    </div>))}
    </section>)}
    </div>
  );
}

输入

export default function Input(props) {
  
  return (<input/>)
}

当我控制台记录它在输入的句柄变化中渲染了多少次电影时，它显示的次数与我拥有的电影道具一样多。我希望它渲染一次。不是 x 次的 movies.length

知道它为什么会这样吗？

【问题讨论】：

您正在使用map 循环遍历数组。它将创建与数组长度一样多的组件。
正确，但是，当我在返回之前放置 console.log 时，在输入内部，我在设置状态时将它渲染为数组大小的 n 倍，它应该只重新渲染一次。跨度>
它们是独立的组件，有自己的渲染周期。

标签： reactjs rerender

【解决方案1】：

您不需要在 App 组件内循环，您可以只提供库中的电影列表，因为 Movies 组件内的电影是循环的。

return (
    <div>
       <Movies movies={library.movies} />
    </div>
);

【讨论】：