Question

我目前正在尝试学习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的帧”

我在做什么错？自动取款机我只是想看看其中有什么，并了解如何使用Flatlist

Answer 1

在这里我怎么做

 <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>
        )
    }

这是博览会链接click here you get the idea 如果有任何疑问，请问我...

为什么我不能在Flatlist中显示我的物品？

1 个答案: