有条件地响应本机渲染FlatList [英] React Native render FlatList conditional

问题描述

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

I have a question regarding React Native FlatList.

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

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.

现在我有一些问题:

1. 如何检查dataZ状态是否为空，并因此呈现一些空的< MonatsView/> 组件?

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

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.但是我不能，因为数据必须是我的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:

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

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

you should modify the current array object according to months wise and render a view and set according to that.

这篇关于有条件地响应本机渲染FlatList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！