Question

我正在尝试从api获取数据，为此我使用了componentDidMount生命周期，但是我在视图中有一个需要从该API创建的列表，因此我将map函数用于接收到的数据以获取所有项目并在渲染部分显示，但是当我运行代码时，我得到了 this.state.matchInfo.map不是函数

请帮助我解决这个问题，我知道componentDidMount将在第一次渲染后运行，因此我首先创建了一个空状态，并希望在获取数据之后，组件将再次渲染并显示我的数据。但它总是让我出错

这是我的代码：

constructor(props) {
    super(props);   
    this.state = {
      userName: '',
      userToken: '',
      userID: '',
      firstTime: true,  
      loading: true,
      showAlert : false,
      alertType : true,
      alertMessage : '',      
      animatedMatchBtn : new Animated.Value(1),      
      matchInfo: []
    };
}

componentDidMount() {  
  this._bootstrapAsync(true);  
}

_bootstrapAsync = async (timeOutStat = null) => { 
  const userToken = await AsyncStorage.getItem('userToken');  
  const userName = await AsyncStorage.getItem('userName');
  const userID = await AsyncStorage.getItem('userID'); 
  await this.setState({
    userName: userName,
    userToken: userToken,
    userID: userID,
  })   
  if(timeOutStat) {
    this.timeOut = setTimeout(() => {
      this.setState({
        loading: false,
        showAlert: true,
        alertType: true,
        alertMessage: ErrorList.matchMakingError
      });
    }, 20000)
  } 
  console.log('token', userToken)   
    await fetch(getInitUrl('getMatchInfo','',this.props.navigation.getParam('matchID', 0)), {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization : `Bearer ${userToken}`  
      }
    }).then(response => Promise.all([response.ok, response.status ,response.json()]))
    .then(([responseOk,responseStatus, body]) => {      //
      this.setState({loading : false});
      clearTimeout(this.timeOut);
      if (responseOk) { 
        console.log('match Info', body);
        this.setState({
          matchInfo : body
        })        
      } else {
        console.log(responseStatus, body);
        this.setState({
          showAlert : true,
          alertType : true,
          alertMessage : ErrorList[body.tag]
        });
      }
    })
    .catch(error => {
      console.error(error);
    });
};

render() {
    //console.log(puzzleSizes)
    let rows = this.state.matchInfo.map((item , index)=>{
      return 
      <MatchDetailBox
      />
    })
    console.log(rows)
   <View>
    {rows}
</View>
}

Answer 1

即使this.setState（）是异步的，它也不会被承诺，因此不能使用promise的ask = input("Please guess the letter: ").upper() # _________/\________ # / This is important \或它的语法糖.then()来工作。因此，在它前面等待是没有用的。但是我想这会造成一滴答的延迟。

同样，为什么在fetch（）前面有async/await，在之后还有await。他们俩都不应该吗？

仅当.then()不是数组但您已将其初始化为1时，才会发生错误this.state.matchInfo.map is not a function，因此matchInfo被修改的任何时间都必须像对象或没有原生this.state.matchInfo的对象。

您是否检查了来自API的响应？我希望这会有所帮助。

.map()

Answer 2

mapData = () => { 
     this.state.matchInfo.map((item , index)=>{
    return(
        <View>
            <MatchDetailBox />
            <View>
                {item}
            </View>
        </View>

    ) 
  })
}
render() {
    return {this.mapData()}
}

如何通过获取的API在渲染部分中创建组件？

2 个答案: