reactjs - 嵌套地图中的反应功能组件多次重新渲染
问题描述
我有三个组件,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
知道为什么它会这样吗?
解决方案
您不需要在 App 组件内循环,您可以只提供库中的电影列表,因为 Movies 组件内的电影是循环的。
return (
<div>
<Movies movies={library.movies} />
</div>
);
推荐阅读
- reactjs - 如何使用 React.js 实时搜索 Giphy 的 GIF?
- c++ - C++ lambda 和模板的交互
- reactjs - Nav.Link to="/About" 在 react-bootstrap 中不起作用?Nav.Link href="/About 正在重新加载整个页面
- vb.net - vb.NET 使用 vb 类而不是表单启动表单,但表单一开始就关闭
- python - Tkinter 初学者
- regex - 正则表达式 - 创建
- python - 从带有请求的 url 中获取随机行
- python - 如何使用 Python 从文本文件中自动删除特定字符?
- python-3.x - 如何在python中调用方法作为命令参数
- azure - 如何将用户添加到 Azure Devops