React Native 有條件地渲染 FlatList

Question

我有一個關於 React Native FlatList 的問題。

我有一個 FlatList，它獲取我的 dataZ state 作為數據道具 - 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 的 state 設置為 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                                   
      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 state 是否為空並因此呈現一些空的<MonatsView/>組件？

2. 是否可以始終呈現一個月中給定天數的字段數量（例如 8 月的 31 個字段，例如），然后通過查看活動日期字段來填寫將保存數據的字段，例如填寫數據對於活動日期為 2019-08-11 的 11.08.2019？

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 state。

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 ）。

• 您應該根據月份修改當前數組 object 並渲染視圖並據此設置。

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