Reactjs 如何在React中直接使用函数？

在这段代码中，我想直接使用函数

\u renderMovies

不像

因为我不想显示装载量

你们知道如何直接使用函数渲染器吗

我的代码：

import React，{Component}来自'React'；
从“/L_MovieList”导入L_MovieList；
从“/L_排名”导入L_排名；
导入“/L_BoxOffice.css”；
L类办公室扩展组件{
陈述={
}
建造师（道具）{
超级（道具）；
this.\u renderMovies=this.\u renderMovies.bind（this）；
}
componentDidMount（）{
这个；
}
_renderMovies=（）=>{
const movies=this.state.movies.map（（电影）=>{
console.log（电影）
返回
})
回归电影
}
_getMovies=async（）=>{
const movies=等待此消息。_callApi（）
这是我的国家({
//电影：电影
电影
})
}
_callApi=（）=>{
返回获取（'https://yts.am/api/v2/list_movies.json?sort_by=download_count')
.then（potato=>potato.json（））
.then（json=>json.data.movies）
.catch（err=>console.log（err））
}
render（）{
const{movies}=this.state；
返回(
排名
{电影？这个。_renderMovies（）：'Loading！'
票房页
);
}
}
导出默认L_BoxOffice；

将

{movies？this.\u renderMovies（）：'load！'}

替换为

{this.renderMovies（）

首先将

movies

设置为默认状态下的空数组

constructor(props) {
  super(props);
  this.state = { movies: [] }
  this._renderMovies = this._renderMovies.bind(this);
}

之后，只需渲染电影：

<div className="L_Ranking_title">RANKING</div>
  {this._renderMovies()}
</div>

排名
{this._renderMovies（）}

将空数组作为默认值，将删除三元运算符用法，并且

.map

将始终有效，因为默认情况下，

电影

将是可编辑的。

使用箭头功能

你可以直接调用这样的函数

_renderMovies = ()=>{
 if(true){

  }else{
   return 'loading...' //just an example
   }
}

render(){
  {this._renderMovies()}
}

---

谢谢！你帮了我！我能再问一个问题吗？修复后，数据会很晚出来..大约2秒。我想在打开页面时立即显示日期。这是因为我把函数放在componentDidMount（）中了吗？。。为什么_renderMovies返回得这么晚？简而言之：在

componentDidMount（）

中调用它很好。如果在构造函数或任何其他生命周期方法中调用它，则不会有太大的改进。请阅读。这取决于你的应用程序架构。您可以创建一个负责数据获取的HOC，但请记住，由于API服务器的响应时间，总是会有资源加载时间。

<div className="L_Ranking_title">RANKING</div>
  {this._renderMovies()}
</div>

_renderMovies = ()=>{
 if(true){

  }else{
   return 'loading...' //just an example
   }
}

render(){
  {this._renderMovies()}
}