Question

我有三个组件，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 次。长度

知道它为什么会这样吗？

Answer 1

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

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

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

1 个答案: