Question

我对React Native FlatList有疑问。

我有一个FlatList，它以数据道具的形式获取我的dataZ状态-dataZ是一个由我的fetchcall填充的Array。我的提取调用的响应如下所示：

[
  {
    "activitydate": "2019-08-01T22:00:00.000Z",
    "phaseid": 7667,
    "time": 360,
    "userid": 138,
    "zkub": " "
  },
  {
    "activitydate": "2019-08-04T22:00:00.000Z",
    "phaseid": null,
    "time": 456,
    "userid": 138,
    "zkub": "K"
  },
  {
    "activitydate": "2019-08-05T22:00:00.000Z",
    "phaseid": null,
    "time": 456,
    "userid": 138,
    "zkub": "K"
  },
  {
    "activitydate": "2019-08-06T22:00:00.000Z",
    "phaseid": null,
    "time": 456,
    "userid": 138,
    "zkub": "K"
  },
  {
    "activitydate": "2019-08-07T22:00:00.000Z",
    "phaseid": null,
    "time": 456,
    "userid": 138,
    "zkub": "K"
  },
  {
    "activitydate": "2019-08-08T22:00:00.000Z",
    "phaseid": null,
    "time": 456,
    "userid": 138,
    "zkub": "K"
  },
  {
    "activitydate": "2019-08-11T22:00:00.000Z",
    "phaseid": 7667,
    "time": 480,
    "userid": 138,
    "zkub": " "
  }
]

当我进行console.log记录时，我将dataZ的状态设置为res。得到它：

stateDataZ  [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]...

这是我的FlatList：

 <FlatList                                   
      style={{ marginVertical: 20 }}
      numColumns={2}  
      keyExtractor={(item, index) => index}
      data={this.state.dataZ}
      renderItem = {({ item }) => {
        //  console.log("Item in RenderItem : " + typeof item)

        if(Array.isArray(this.state.dataZ)) {

          return <MonatsView
          navigate={() => this.props.navigation.navigate("Tag")}
          tag={moment(item.activitydate).format("DD-MM")}
          tagDesc={moment(item.activitydate).day()}
          phase={item.phaseid}
          time={item.time}
          zkub={item.zkub}
          />
        } 
        else {
          return console.log("DATA IS NO ARRAY????")
        }
      }
      }
    />

如果数据库中有一些条目，我会正确显示组件。

现在我有一些问题：

如何检查dataZ状态是否为空，并因此渲染一些空的<MonatsView/>组件？
是否可以始终呈现一个月中给定日期的字段数量（例如，例如8月为31个字段），然后通过查看activitydate字段和例如填写活动日期为2019-08-11的11.08.2019的数据？
我需要告诉我的Flatlist，如果有两个相同的活动日期，则必须将两个对象都带有该数组中的日期，并且只给我一个<MonatsView />组件，而不是两个。例如：

[
  {
    "activitydate": "2019-08-01T22:00:00.000Z",
    "phaseid": 7667,
    "time": 360,
    "userid": 138,
    "zkub": " "
  },
  {
    "activitydate": "2019-08-01T22:00:00.000Z",
    "phaseid": 7637,
    "time": 120,
    "userid": 138,
    "zkub": " "
  }
]

这两个对象应该只呈现一个<MonatsView/>组件-但是因为我的renderItem函数正在调用我不知道如何执行的每个项上的所有内容。

这是我的Fetchcall：

__SOME CODE__      (state={ dataZ = []} - how my dataZ looks like)
await fetch(
      URL with params
    )
      .then(res => res.json())
      .then(res => {
        console.log("ResArray?? " + JSON.stringify(res[0]));
        this.setState({
          dataZ: res
        });
        console.log("stateDataZ  " + this.state.dataZ);
      })
      .catch(err => console.log(err));

对于我的问题1：我刚刚发现ListEmptyComponent，但是当我说这里应该用<MonatsView/>时，它只显示1，这有意义，因为它查看数据。我将需要将数据设置为数字数组，例如1-31。但是我不能，因为数据必须是我的dataZ状态。

Answer 1

是的，您可以检查为空的数组值，并可以使用此呈现另一个视图

{
(this.state.dataZ.length!=0)?
 <FlatList                                   
      style={{ marginVertical: 20 }}
      numColumns={2}  
      keyExtractor={(item, index) => index}
      data={this.state.dataZ}
      renderItem = {({ item }) => {
        //  console.log("Item in RenderItem : " + typeof item)

        if(Array.isArray(this.state.dataZ)) {

          return <MonatsView
          navigate={() => this.props.navigation.navigate("Tag")}
          tag={moment(item.activitydate).format("DD-MM")}
          tagDesc={moment(item.activitydate).day()}
          phase={item.phaseid}
          time={item.time}
          zkub={item.zkub}
          />
        } 
        else {
          return console.log("DATA IS NO ARRAY????")
        }
      }
      }
    />
:
<View> .--------**write here any other view** ----- </View>
}

这将为您提供帮助

要点2：为此，您可以使用：

a）：-使用部分列表仅显示一个月的数据（https://facebook.github.io/react-native/docs/sectionlist）。

b）您应该按月修改当前数组对象，并根据该视图渲染并设置视图。

请使用，对您有帮助。

Answer 2

您可以使用

之类的Array来检查是否为空

this.state.dataZ.length == 0 ? do some thing here if true : do some thing here if false

和FlatList具有属性ListEmptyComponent。当this.state.dataZ为空时调用。例如：

<FlatList                                   
      style={{ marginVertical: 20 }}
      numColumns={2}  
      keyExtractor={(item, index) => index}
      data={this.state.dataZ}
      renderItem = {({ item }) => {
        //  console.log("Item in RenderItem : " + typeof item)
        if(Array.isArray(this.state.dataZ)) {

          return <MonatsView
          navigate={() => this.props.navigation.navigate("Tag")}
          tag={moment(item.activitydate).format("DD-MM")}
          tagDesc={moment(item.activitydate).day()}
          phase={item.phaseid}
          time={item.time}
          zkub={item.zkub}
          />
        } 
        else {
          return console.log("DATA IS NO ARRAY????")
        }
      }
      }
      ListEmptyComponent={
        <EmptyComponent title="Nothing here, come back later.." />
      }
    />

有条件地响应本机渲染FlatList

2 个答案: