Реагируйте - this.props.appRecommendData.map не является функцией

Question

Я новичок в ReactJS, я стремлюсь сделать приложение для поиска веб-приложений. Вот моя идея:
В app.js у меня есть состояние: appRecommendData, которое извлекает результат из API магазина приложений и выполняет поиск с помощью функции filterAppRecommend(), а затем визуализирует компонент, называемый AppRecommend, я обнаружил, что не могу отобразить изначально результат, но он работает после ввода из-за асинхронной проблемы (когда я все еще извлекаю данные, запущена функция экспорта), затем я попытался добавить async и await для ее решения, это работает, но props.map не работает, кто-нибудь может помочь решить / предложить другой способ исправить это? ниже мой код:
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>
    );
  }
}
}

В 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);

}

В компоненте 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

Answer 1

Поскольку вы используете .map для сбора данных, appRecommendData должен быть массивом. filterAppRecommend должен возвращать данные в виде массива. Вы можете использовать sth как это, чтобы получить начальное значение:

//App.js

async componentDidMount() {
   const filteredRecommend = await filterAppRecommend("",10);
   this.setState({ filteredRecommend });
}

В AppRecommmend.js используйте

AppRecommmend.defaultProps = {
appRecommendData : []
}