Как объявить переменную внутри flatList renderItem? - PullRequest
0 голосов
/ 28 марта 2019

Я пытаюсь получить дату и отформатировать ее, используя момент, решение, которое я нашел, заключается в сохранении даты в переменной, и у меня возникла проблема с этим после этого 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: ошибок компиляции нет.

Ответы [ 2 ]

0 голосов
/ 28 марта 2019

вам нужно использовать инструкцию возврата, например:

<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>
               ...
          );
0 голосов
/ 28 марта 2019

renderItem ожидает, что вы вернете немного jsx ... а вы не

Попробуйте это:

  <FlatList
    data={this.state.data}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({ item: { date } }) => (<View>// the rest of your jsx</View>)}
  />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...