javascript - 有没有办法克服 .map 不是函数类型错误?
问题描述
我正在使用 react 构建一个食品订购应用程序。我已经为 api 调用构建了后端,它似乎工作正常。我卡在 this.state.filteredRestaurantList.map 不是函数错误。有什么解决方案吗?我应该更改导出默认值还是有其他方法。是不是因为getGridListCols!
class Home extends React.Component {
constructor(props){
super(props);
this.state = {
restaurantList: [],
filteredRestaurantList: [],
}
}
getGridListCols = () => {
if (isWidthUp('xl', this.props.width)) {
return 6;
}
if (isWidthUp('lg', this.props.width)) {
return 5;
}
if (isWidthUp('md', this.props.width)) {
return 4;
}
if (isWidthUp('sm', this.props.width)) {
return 2
}
return 1;
}
searchHandler = (value) => {
if (value !== '') {
this.findRestaurantApiCall(value);
}else {
this.getAllRestaurantsApiCall();
}
}
itemClickHandler= (id)=>{
console.log('id',id);
this.props.setRestaurantId(id);
this.props.history.push('/details');
}
render(){
return(
<div style={{marginTop:100}}>
<Header screen="Home" searchHandler={this.searchHandler}/>
<div>
<GridList cellHeight={'auto'} cols={this.getGridListCols()}>
{this.state.filteredRestaurantList.map(item =>(
<GridListTile key={item.id}>
<HomeItem onItemClick={this.itemClickHandler} item={item} />
</GridListTile>
))}
</GridList>
</div>
</div>
);
}
componentDidMount(){
this.getAllRestaurantsApiCall();
}
getAllRestaurantsApiCall = () => {
let that = this;
let url = `http://localhost:8080/api/restaurant`;
return fetch(url,{
method:'GET',
}).then((response) =>{
if (response.ok) {
return response.json();
}
}).then((responseJson)=>{
that.setState({
restaurantList:responseJson,
filteredRestaurantList:responseJson
});
}).catch((error) => {
console.log('error login data',error);
});
}
findRestaurantApiCall = (value) => {
let that = this;
let url = `http://localhost:8080/api/restaurant/name/${value}`;
return fetch(url,{
method:'GET',
}).then((response) =>{
if (response.ok) {
return response.json();
}
}).then((responseJson)=>{
console.log('json',responseJson);
that.setState({
restaurantList:responseJson,
filteredRestaurantList:responseJson
});
}).catch((error) => {
console.log('error login data',error);
});
}
}
function HomeItem(props){
const{item} = props;
return(
<div className="home-item-main-container">
<Card style={{width:280}}>
<CardActionArea onClick={(e)=>props.onItemClick(item.id)}>
<CardMedia
component="img"
alt={item.restaurantName}
style={{objectFit: 'cover'}}
height="140"
image={item.photoUrl}
title={item.restaurantName}/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{item.restaurantName}
</Typography>
<Typography component="p">
{item.categories}
</Typography>
<div style={{marginTop:25,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
<div style={{display:'flex',flexDirection:'row',backgroundColor:"#FDD835",padding:5,justifyContent:'space-evenly',alignItems:'center',width:80}}>
<FontAwesomeIcon icon="star" color="white"/>
<span className="white">{item.userRating}({item.numberUsersRated})</span>
</div>
<div>
<FontAwesomeIcon size="sm" icon="rupee-sign" color="black"/>
<span>{item.avgPrice} for two</span>
</div>
</div>
</CardContent>
</CardActionArea>
</Card>
</div>
)
}
export default withWidth(Home);
我希望我的主页呈现没有任何错误
解决方案
如果您从后端获取数据,那么您应该首先检查是否filteredRestaurantList
是一个可以像这样完成的数组
this.state.filteredRestaurantList && this.state.filteredRestaurantList.map(...)
很可能,这就是这里的问题。编译器抛出错误,因为map()
Array 类型的值是允许的。
希望这可以帮助!
推荐阅读
- haskell - Haskell Reader monad 和参数传递
- vuejs2 - 在 Vuejs 中的组件上显示翻译
- vue.js - Vue 转换适用于“进入”状态,但不适用于“离开”状态
- python - pytorch 交叉熵损失权重不起作用
- cassandra - 如何为其他 Cassandra 的远程节点复制 Cassandra 的本地节点?
- java - Logback 自定义 JSON 附加程序
- reactjs - 如何使用 React Native Material Ui 步进器存储和预填充数据?
- python - 如何在机器人框架中自动化用户输入
- laravel - 为什么 myproject/log-viewer 显示空日志页面?
- plot - 无法在 MNE 中创建地块