[英]React - this.props.appRecommendData.map is not a function
I am a beginner at ReactJS, I aim to make an app searching web application. 我是ReactJS的初学者,我的目标是制作一个搜索网络应用程序的应用程序。 Here is my idea:
这是我的主意:
In app.js
, I have a state: appRecommendData
which retrieve the result from the app store API and do searching by a function filterAppRecommend()
, and then rendered by a component called AppRecommend
, I found that I cannot render the result initially, but it works after typing, because of the async problem(when I still fetching the data, the export function have started), then I tried to add async
and await
to solve it, it works but the props.map
is not function, can anyone help to solve it/suggest other way to fix it? 在
app.js
,我有一个状态: appRecommendData
,它从应用商店API中检索结果并通过filterAppRecommend()
函数进行搜索,然后由名为AppRecommend
的组件进行呈现,我发现我最初无法呈现结果,但是由于异步问题(当我仍在获取数据时,导出功能已启动),它在输入后可以工作,然后我尝试添加async
并await
解决它,但它可以工作,但是props.map
无法正常工作,任何人都可以帮助解决它/建议其他解决方法? below is my code: 下面是我的代码:
app.js
: app.js
:
class App extends Component {
constructor(props) {
super(props);
this.state = {
filteredAppList: [],
filteredRecommend:filterAppRecommend("",10)
};
}
handleSearchChange = event =>{
this.setState({
filteredRecommend:filterAppRecommend(event.target.value,10)
});
}
render() {
return (
<div className="App">
<header className="App-header">
<div className="search-bar"><SearchInput textChange={this.handleSearchChange} /></div>
<div className="App-recommendation">
<AppRecommend appRecommendData={this.state.filteredRecommend}/>
</div>
</header>
</div>
);
}
}
}
In filterAppRecommend.js
: 在
filterAppRecommend.js
:
export default async function filterAppRecommend(searchText, maxResults) {
console.log("maxResults is"+maxResults);
const api = await fetch("https://itunes.apple.com/hk/rss/topgrossingapplications/limit=10/json")
.then(results=>results.json());
console.log(api);
let datas = api.feed.entry;
console.log(datas);
return datas.filter(data => {
if(searchText===""){
return true;
}
if (data["im:name"].label.toLowerCase().includes(searchText.toLowerCase())) {
return true;
}
if (data["im:name"].label.includes(searchText)) {
return true;
}
return false;
})
.slice(0, maxResults);
}
In Component AppRecommend
: 在组件
AppRecommend
:
class AppRecommmend extends PureComponent{
constructor(props){
super(props);
this.state = {
isLoading:false,
};
}
render(){
console.log(this.props.appRecommendData.type); //will show undefined
return(
<div className="component-AppRecommend">
{this.props.appRecommendData.map(appRecommendData=>(
<AppRecommmendCol
imgSource={appRecommendData["im:image"][1].label}
title={appRecommendData["im:name"].label}/>
))}
</div>
);}
}
AppRecommmend.propTypes = {
appRecommendData: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array
])
}
export default AppRecommmend
Since you use .map to go through collection of data, appRecommendData should be an array. 由于您使用.map进行数据收集,因此appRecommendData应该是一个数组。 filterAppRecommend should return data as array.
filterAppRecommend应该以数组形式返回数据。 You can use sth like this to get initial value:
您可以像这样使用sth来获取初始值:
//App.js
async componentDidMount() {
const filteredRecommend = await filterAppRecommend("",10);
this.setState({ filteredRecommend });
}
In AppRecommmend.js use 在AppRecommmend.js中使用
AppRecommmend.defaultProps = {
appRecommendData : []
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.