Question

我试图通过我的数据库的get请求获得我的本机应用程序中餐厅的信息。我获取数据没有问题，这是显示问题。

在我的组件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>

因此，我试图像getRestaurantInfo()方法那样在Text组件内简单地显示餐厅名称，但是如果我不删除它，它将返回未定义的内容。

渲染方法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>
  )
}

Answer 1

您忘记在自己的FlatList renderItem中传递item：

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

您还可以返回Component而不是方法：

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示例。

Answer 2

好吧，我终于找到了解决方案，这是因为当我在后端的调用中使用setState时，处于状态的数组restaurantInfo被转换为对象。因此，在flatList的render方法内没有数据

旧代码

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}`}
        />

获取请求响应本机后无法显示数据

2 个答案: