React Native 有条件地渲染 FlatList

Question

我有一个关于 React Native FlatList 的问题。

我有一个 FlatList，它将我的 dataZ 状态作为数据道具 - dataZ 是一个由我的 fetchcall 填充的数组。我的 fetch 调用的响应如下所示：

[
  {
    "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????")
        }
      }
      }
    />

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

现在我有一些问题：

1. 如何检查 dataZ 状态是否为空，从而渲染一些空的<MonatsView/> 组件？

2. 是否可以始终呈现一个月中给定日期的字段数量（例如 8 月的 31 个字段），然后通过查看 activitydate 字段和比如填写11.08.2019的数据，activitydate是2019-08-11？

3. 我需要告诉我的 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。但我不能，因为 data 需要是我的 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 点：为此您可以使用：

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

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

Answer 2

您可以使用数组的长度来检查是否为空，例如

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.." />
      }
    />