javascript - React Native 渲染 FlatList 有条件

Question

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

我有一个 FlatList，它获取我的 dataZ 状态作为 data 属性 - 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 字段来填写保存数据的字段，例如填写 2019 年 8 月 11 日的数据，其中事件日期为 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。但我不能，因为数据需要是我的 dataZ 状态。

Answer 1

是的，您可以检查空数组值并可以使用它渲染另一个 View

{
(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 )。

• 您应该根据月份修改当前数组对象并渲染 View 并根据该设置进行设置。