有没有办法克服.map不是函数类型错误?

问题描述 投票:0回答:2

我正在使用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);

我希望我的主页没有任何错误

javascript reactjs
2个回答
1
投票

如果你从后端获取数据,那么你应该首先检查filteredRestaurantList是否是一个可以像

this.state.filteredRestaurantList && this.state.filteredRestaurantList.map(...)

最有可能的是,这是问题所在。编译器抛出错误,因为允许在Array类型的值上使用map()

希望这可以帮助!


0
投票

你可以利用对象解构

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>
        );
      }
© www.soinside.com 2019 - 2024. All rights reserved.