Невозможно отобразить данные после ответа на запрос get - PullRequest
Новая
       7

Невозможно отобразить данные после ответа на запрос get

0 голосов
/ 18 марта 2020

Я пытаюсь отобразить информацию о ресторане в моем приложении, реагирующем на натив, после того, как получаю его по запросу из моей базы данных. У меня нет проблем с получением данных, это проблема с дисплеем.

Внутри моего компонента RestaurantDetailScreen: 

  componentDidMount() {
    this.getRestaurantInfo()
  }

  getRestaurantInfo = async () => {
    try {
      let res = await axios({
        method: 'get',
        url: `${environment.apiDevUrl}/restaurant/${this.state.restaurantId}`,
      })
      this.setState({
        restaurantInfo: res.data,
      })
      console.log(this.state.restaurantInfo.restaurant.nom);
    } catch (error) {
      console.error(error)
    }
  }

В журнале консоли отображается мое состояние с правильными данными из моего бэкэнда, но когда я пытаюсь отобразить его внутри моего Flatlist, ничего не отображается: 

<ScrollView style={styles.container}>
        {/* <Text>{this.state.restaurantInfo.restaurant.nom}</Text> */}
        <FlatList
          data={this.state.restaurantInfo}
          renderItem={this.renderRestaurantInfo}
          keyExtractor={item => `${item.restaurant.id}`}
        />
        <SectionList
          sections={productData}
          ItemSeparatorComponent={this.renderSeparator}
          renderItem={this.renderRestaurantDetail}
          renderSectionHeader={({section: {header}}) => (
            <Text style={styles.sectionHeader}>{header}</Text>
          )}
          keyExtractor={(item, index) => `${item.id}` + index}
          ref={ref => (this.sectionListRef = ref)}
          getItemLayout={this.getItemLayout}
        />
      </ScrollView>

Поэтому я попытался просто отобразить название ресторана внутри компонента Text, как в методе getRestaurantInfo(), но это вернет неопределенное значение, если я не удаляю его.

Метод рендеринга renderRestaurantInfo(): 

  renderRestaurantInfo = ({item}) => (
    <View style={styles.containerRestaurantInfo}>
      {console.log('item : ', item)}
      <ItemRestaurantInfo
        // image={item.restaurant.image}
        title={item.restaurant.nom}
        description={item.restaurant.description}
        categories={item.restaurant.categorie}
        adress={item.restaurant.adresse.rue1}
        scheduleBeginning={item.restaurant.horaires.crenaux.hDebut}
        scheduleEnd={item.restaurant.horaires.crenaux.hFin}
      />
    </View>
  )

И, наконец, компонент ItemRestaurantInfo: 

ItemRestaurantInfo = ({
  image,
  title,
  categories,
  adress,
  description,
  scheduleBeginning,
  scheduleEnd,
}) => {
  return (
    <View>
      {/* <Image source={image} style={styles.topImage} /> */}
      <View style={{padding: 15}}>
        <Text style={styles.restaurantTitle}>{title}</Text>
        <Text style={styles.restaurantInfoText}>{`${categories}`}</Text>
        <View style={styles.viewInRow}>
          <Image
            style={{margin: 5}}
            source={require('../../assets/icons/map-pin.png')}
          />
          <Text style={styles.restaurantInfoText}>{adress}</Text>
        </View>
        <Text style={styles.restaurantInfoText}>{description}</Text>
        <View style={styles.viewInRow}>
          <Image
            style={{margin: 5}}
            source={require('../../assets/icons/calendar.png')}
          />
          <Text style={styles.restaurantInfoText}>{scheduleBeginning} - {scheduleEnd}</Text>
        </View>
      </View>
    </View>
  )
}

Ответы [ 2 ]

0 голосов
/ 18 марта 2020

Хорошо, я наконец-то нашел решение, потому что мой массив restaurantInfo в состоянии был преобразован в объект, когда я использовал setState при вызове моего бэкэнда ... поэтому внутри метода рендеринга flatList не было данных .

СТАРЫЙ КОД 

getRestaurantInfo = async () => {
    try {
      let res = await axios({
        method: 'get',
        url: `${environment.apiDevUrl}/restaurant/${this.state.restaurantId}`,
      }) 
      this.setState({
        restaurantInfo: res.data,
      })
    } catch (error) {
      console.error(error)
    }
  }

НОВЫЙ КОД 

 getRestaurantInfo = async () => {
    try {
      let res = await axios({
        method: 'get',
        url: `${environment.apiDevUrl}/restaurant/${this.state.restaurantId}`,
      })
      let newArray = [...this.state.restaurantInfo];
      newArray[0] = res.data
      this.setState({
        restaurantInfo: newArray,
      })
      console.log('state dans getResturantinfo:',this.state.restaurantInfo);
    } catch (error) {
      console.error(error)
    }
  }

С этим синтаксисом он принудительно реагирует на поддержание массив. И, наконец, не было необходимости использовать этот синтаксис: renderItem={({item}) => this.renderRestaurantInfo(item)}

В моем коде я держу его так: 

<FlatList
          data={this.state.restaurantInfo}
          renderItem={this.renderRestaurantInfo}
          keyExtractor={item => `${item.restaurant.id}`}
        />
0 голосов
/ 18 марта 2020

Вы забыли передать item в свой FlatList renderItem : 

<FlatList
   data={this.state.restaurantInfo}
   renderItem={({item}) => this.renderRestaurantInfo(item)}
   ...
/>

Вы также можете вернуть компонент вместо метода: 

const RenderItems = ({ title }) => {
  return (
    <View>
      <Text>{title}</Text>
    </View>
  );
}

...

// Pass the component to your FlatList
<FlatList
   data={YOURDATA}
   renderItem={({ item }) => <RenderItems title={item.title} />}
   ...
/>

И То же самое относится и к SectionList

Редактировать: Работа condeSandbox пример с выборкой данных.

...