React Native 有条件地渲染 FlatList-前端问题

React Native render FlatList conditional(React Native 有条件地渲染 FlatList)

本文介绍了React Native 有条件地渲染 FlatList的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a question regarding React Native FlatList.

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

I have a FlatList that gets my dataZ state as the data prop - dataZ is an Array that gets filled in by my fetchcall. The response of my fetch call looks like this:

[
  {
    "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 我得到这个:

I set the state of dataZ to be the res when I console.log it I get this:

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:

This here is my 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????")
        }
      }
      }
    />

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

If there are some entrys in the DB I get the component displayed properly.

现在我有一些问题:

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

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

Is it possible to always render the amount of fields for the given days in a month (like 31 fields for August for ex.) and then fill in the ones that would hold data by looking at the activitydate field and for example filling in the data for the 11.08.2019 where the activitydate is 2019-08-11?

我需要告诉我的 Flatlist，如果有两个相同的活动日期，它必须获取具有该日期的两个对象，并且只返回一个 <MonatsView/> 组件而不是两个.例如:

I need to tell my Flatlist that if there are two same activity dates it has to take both objects with the date in that array and only give me back one <MonatsView /> component instead of two. For example:

[
  {
    "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 函数正在调用每个项目的所有内容，我不知道该怎么做.

These two objects should only render one <MonatsView/> component - but beacuse my renderItem func is calling everything on each item I dont know how to do this.

这是我的 Fetchcall:

Here is my 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 状态.

To my question 1: I just found ListEmptyComponent but when I say that it should take <MonatsView/> here it only displays 1 which makes sense because it looks at data. I would need to set data to an array of numbers like 1-31 for example. But I can't because data needs to be my dataZ state.

推荐答案

是的，你可以检查空数组值，并可以使用这个来渲染另一个视图

Yes, you can check empty array value and can render another view by using this

{
(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 点:为此您可以使用:

Point 2: for this you can use: