我有一个关于 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????")
}
}
}
/>
如果数据库中有一些条目,我会正确显示组件。
现在我有一些问题:
如何检查 dataZ 状态是否为空并因此渲染一些空的
<MonatsView/>
组件?是否可以始终呈现一个月中给定日期的字段数量(例如 8 月的 31 个字段),然后通过查看 Activitydate 字段来填写保存数据的字段,例如填写 2019 年 8 月 11 日的数据,其中事件日期为 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 状态。
最佳答案
是的,您可以检查空数组值并可以使用它渲染另一个 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 并根据该设置进行设置。
关于javascript - React Native 渲染 FlatList 有条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58991451/