如何在 flatList renderItem 中声明变量？答案

【问题标题】：how to declare a variable inside a flatList renderItem?如何在 flatList renderItem 中声明变量？
【发布时间】：2019-03-28 20:28:37
【问题描述】：

我正在尝试获取日期并使用 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 : 没有编译错误。

【问题讨论】：

标签： react-native momentjs react-native-flatlist

【解决方案1】：

您需要使用 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>
               ...
          );

【讨论】：

【解决方案2】：

renderItem 期望你返回一些 jsx ... 而你没有

试试这个：

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

【讨论】：