Question

我正在尝试获取日期并使用moment对其进行格式化，我发现的解决方案是将日期存储在变量中，并且自从我遇到awnser之后，我一直遇到问题同样的问题。尽管我设法摆脱了意外的令牌错误，但是我使自己陷入了另一种困境。我的平面列表不再显示。这是我的代码：

    import React, { Component } from "react";
import {View,StyleSheet,FlatList,ListView} from "react-native";
import {Container, Header, Left, Body, Right, Title, Subtitle,Icon ,Content, Footer, FooterTab, Button, Text,Badge , List , ListItem} from 'native-base'
import Icon0 from 'react-native-vector-icons/MaterialCommunityIcons'
import Icon1 from 'react-native-vector-icons/FontAwesome'
import CountDown from 'react-native-countdown-component';
import moment from 'moment';


class Consulter extends Component{


  state ={
    data:[]
  }
  fetchData= async()=>{
      const response = await fetch('http://192.168.1.4:3000/rendezvous/1');
      const rendezvous =await response.json();
      this.setState({data:rendezvous});
  }

  componentDidMount() {
      this.fetchData();
  }




  render() {
    const today = this.state.currentDate;
    const day = moment(today).format("dddd");
    const date = moment(today).format("MMMM D, YYYY");
      return (
        <Container>
               <Content >
                 <View style ={{ flex:1}}>
                   <FlatList
                     data={this.state.data}
                     keyExtractor={(item,index) => index.toString()}
                     renderItem={({item}) =>
                     {let dates=item.date;

                      <View style={{backgroundColor:'#e6e6e6',padding:10,margin:10}}>
                        <ListItem icon>
                          <Left>
                            <Button style={{ backgroundColor: "white" }}>
                              <Icon0 active name="doctor" />
                            </Button>
                          </Left>
                          <Body>
                            <Text>Nom du Docteur : Dr. {item.nom}</Text>
                          </Body>
                        </ListItem>
                        <ListItem icon>
                          <Left>
                            <Button style={{ backgroundColor: "white" }}>
                              <Icon1 active name="calendar" />
                            </Button>
                          </Left>
                          <Body>
                            <Text>Date du rendez-vous :</Text>

                            <Text> dates </Text>
                          </Body>
                        </ListItem>
                        <ListItem icon>
                          <Left>
                            <Button style={{ backgroundColor: "white" }}>
                              <Icon1 active name="calendar"/>
                            </Button>
                          </Left>
                          <Body>
                            <CountDown
                              until= {item.date}
                              timetoShow={('H', 'M', 'S')}
                              onFinish={() => alert('finished')}
                              onPress={() => alert('hello')}
                              size={10}
                            />
                        </Body>
                      </ListItem>
                    </View>
                  }}
                />
              </View>
            </Content>
          </Container>
        );
      }
}
    export default Consulter;
    const styles =StyleSheet.create({
      container : {
        flex: 1,
      }
    })

Ps：没有编译错误。

Answer 1

renderItem希望您返回一些jsx ...而您没有

尝试一下：

  <FlatList
    data={this.state.data}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({ item: { date } }) => (<View>// the rest of your jsx</View>)}
  />

Answer 2

您需要使用return语句，像这样：

<FlatList
    data={this.state.data}
    keyExtractor={(item,index) => index.toString()}
    renderItem={({item}) =>
    {let dates=item.date;

    return( 
         <View style={{backgroundColor:'#e6e6e6',padding:10,margin:10}}>
             <ListItem icon>
               ...
          );

如何在flatList renderItem中声明变量？

2 个答案: