我有一个关于React Native FlatList的问题。
我有一个FlatList，它以数据道具的形式获取dataZ状态-dataZ是一个由fetchcall填充的Array。我的提取调用的响应如下所示：
[
{
"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????")
}
}
}
/>
如果数据库中有一些条目，我会正确显示组件。
现在我有一些问题：
如何检查dataZ状态是否为空，并因此渲染一些空的
<MonatsView/>组件？是否可以始终呈现一个月中给定日期的字段数量（例如8月为31个字段，例如），然后通过查看activitydate字段（例如填写数据）来填充将保存数据的字段for 11.08.2019，活动日期为2019-08-11？
我需要告诉我的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状态。 最佳答案
是的，您可以检查空数组的值，并可以使用此方法渲染另一个视图
{
(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）。
您应该按月修改当前数组对象，并根据其渲染视图和设置。