根据部分显示项目

Question

我想显示一个部分和与该部分相关的项目。我的意思是以下方式

过期

项目1

项目2

项目3

没有到期

项目1

项目2

项目3

我尝试了下面的方式，但是这种方式，我无法生成上面的ui。我该怎么做？

我有以下来自服务器的数据 开始时间， 时间结束， 提醒时间， 标题， _id

这是我尝试过的

const
    ListItem = ({task}) => {
        const
            current_time = new Date();
        if (current_time > task.end_time) {
            return <View key={task._id} style={{flexDirection: 'column', flex: 1}}>
                <Text>overdue</Text>
                <Text>{task.title}</Text>
                <Text>{task.start_time}</Text>
            </View>
        }
        return (
            <View key={task._id} style={{flexDirection: 'column', flex: 1}}>
                <Text>{task.title}</Text>
                <Text>{task.start_time}</Text>
            </View>
        )
    }

const List = ({query}) => {
    console.log('query', query);
    if(query.loading) return <Text>Loading...</Text>
    if(query.error) return <Text>Error...</Text>
    return (
        <Wrapper>
                <View style={{flexDirection: 'row', marginLeft: 10, marginTop: 10}}>
                    <Image
                        resizeMode="contain"
                        source={newIcon}
                        style={{width: 25, height: 25}}
                    />
                    <Text
                        style={{
                            alignSelf: 'center',
                            color: '#1F84DD'
                        }}>
                        New Task
                    </Text>
                </View>
                <FlatList
                    data={query.tasks}
                    renderItem={({item}) => <ListItem task={item} />}
                />
        </Wrapper>
    )
}

尝试使用SectionList如下方式

<SectionList
    sections={[
        {title: 'Overdue', data:query.tasks.filter(task => task.end_time < new Date())},
        {title: 'Upcoming', data:query.tasks.filter(task => task.end_time > new Date())}
    ]}
    renderItem={({item}) => <Text>{item}</Text>}
    renderSectionHeader={
        ({section}) => <Text>{section.title}</Text>
    }
/>

这样我得到错误

不变违规：对象作为 React 子项无效（找到：对象 带键 _id、start_time、end_time、remincer_time)

Answer 1

我看到了一种可能的解决方案。在您的部分列表代码中，您正在文本组件内打印项目对象，它应该是标题。 将 renderItem={({item}) => {item}} 替换为 renderItem={({item}) => {item.titke}}。

谢谢。