我正在使用react构建一个食品订购应用程序。我已经构建了api调用的后端,它似乎工作正常。我陷入了这个.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(...)
最有可能的是,这是问题所在。编译器抛出错误,因为允许在Array类型的值上使用map()
。
希望这可以帮助!
你可以利用对象解构
class Home extends React.Component {
constructor(props){
super(props);
this.state = {
restaurantList: [],
filteredRestaurantList: [],
}
}
render(){
const { filteredRestaurantList = [] } = this.state;
return(
<div style={{marginTop:100}}>
<Header screen="Home" searchHandler={this.searchHandler}/>
<div>
<GridList cellHeight={'auto'} cols={this.getGridListCols()}>
{filteredRestaurantList.map(item =>(
<GridListTile key={item.id}>
<HomeItem onItemClick={this.itemClickHandler} item={item} />
</GridListTile>
))}
</GridList>
</div>
</div>
);
}