Question

我正在使用axios从链接获取json数据，我从componentWillMount函数调用该链接，然后将数据存储在state中，我的渲染方法包含一个应该显示该数据的FlatList，一切正常，我只希望可以创建一个条件，我希望我的渲染方法仅在状态中有一些数据时显示Faltlist，否则显示一条简单的消息说没有数据可显示，我不知道为什么它不适用于我的代码，请帮忙：

这是我在render方法中的清单：

<FlatList
        data = {this.state.data}
        renderItem = {this.renders}
        keyExtractor ={this.keyextractor}
        />

这是Flatlist调用的renders函数：

renders({item}){
if(item.length > 0)
{
    return(
      <Itemz
      offer={item}
      />
  );
}else{
return(
    <View><Text>No Data to show</Text></View>
);
  }

Answer 1

您可以尝试使用FlatList属性ListEmptyComponent，该属性在data为空时呈现。

https://facebook.github.io/react-native/docs/flatlist#listemptycomponent

Answer 2

您需要将条件检查放入render（）函数中，因为您只想在存在数据时显示FlatList。

render() {

  const {data} = this.state;

  if (data.length > 0) {
    return <FlatList data={data} renderItem={this.renderItem} ... />
  } else {
    return (
      <View>
        <Text>No Data to show</Text>
      </View>
    );
  }
}

renderItem = ({item}) => {
  return <Item offer={item} />
}

仅当有数据时才如何渲染项目？

2 个答案: