为什么我不能在 Flatlist 中显示我的项目？

debugcn 发表于 Dev

约翰·多伊

我目前正在尝试学习 React-Native atm，但在我的 FlatList 中显示我的项目时遇到了一些问题。

下面是我的代码

import React from 'react';
import { FlatList, ActivityIndicator, Text, View  } from 'react-native';

export default class FetchExample extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isLoading: true,
      dataSource: []
    }
}

  componentDidMount(){

    return fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
           .then((res) => res.json())
           .then((resJson) => {
           console.log('Here are the stuff', resJson.bpi)
           this.setState({
              isLoading: false,
              dataSource: resJson.bpi,
             })
           })
// catch any potential errors here
    .catch((error) =>{
      console.log(error)
    })
  }

  render(){
if(this.state.isLoading){
  return(
    <View style={{flex: 1, padding: 20}}>
      <ActivityIndicator />
    </View>
  );
}
return(
  <View style={{flex: 0.5, padding: 20}}>
    <Text>{console.log(this.state.dataSource)}</Text>
    <Text>Here's some testing text</Text>
    <Text>{console.log("This is in this.state.dataSource", this.state.dataSource)}</Text>
    {/* <FlatList 
      data= {this.state.dataSource}
      renderItem = {({item}) => <Text>{console.log(item)}</Text>} 
      /> */}
  </View>
)
  }
}

每当我取消对 FlatList 的注释时，模拟器都会向我发出错误消息，提示“不变违规：试图获取超出范围索引 NaN 的框架”

我究竟做错了什么？Atm 我只是想看看项目中有什么并了解如何使用 Flatlist

chetan 谢谢

这里我是怎么做的

 <FlatList
          data={[this.state.dataSource]}
          renderItem={({ item }) => this._renderListItem(item)}
        />

这里是 _renderListItem()

 _renderListItem(item){
    console.log(item)
      return(
        <View>
          <View style={{flexDirection:'row',width:'100%',backgroundColor:'red'}}>
          <Text>{item.USD.code}</Text>
          <Text>{item.USD.symbol}</Text>
          <Text>{item.USD.description}</Text>
          </View>
        </View>
        )
    }

这是世博会的链接，点击这里你明白了，如果你有任何问题，请问我......

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。