извлечение логов из API, но не рендеринг

Question

Я пытался извлечь данные из API, но журналы, кажется, показывают ответ JSON, однако, он не появляется в моем интерфейсе.

Это мой код для извлечения api:

componentDidMount() {
    return fetch('http://atiiuserauth.ap-south-1.elasticbeanstalk.com/home')
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            data: responseJson,
          },
          console.log(responseJson)
        );
      })
      .catch(error => {
        console.error(error);
      });
  }

Это мой реандерметод ()

 render() {
    const { height } = Dimensions.get('window');
    const { width } = Dimensions.get('window');
    const like = this.state.liked ? 'red' : 'white';

    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1, padding: 20 }}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View style={{flex:1}}>

        <FlatList
        datasource={this.state.data}

        renderItem={({ item }) => (
        <View style = {{alignContent: 'stretch'}}>
        <Video 
          source={{ uri: item.urlVid }}
          resizeMode = "cover"
          style={{width: "100%", height: 800}}
        />
         <View
              style={{
                position: 'absolute',
                flexDirection: 'column',
                alignItems: 'flex-end',
                top: '50%',
                right: 10,
              }}>
              <TouchableOpacity
                onPress={this.handleClick}
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon
                  name="heart"
                  size={30}
                  color={this.state.buttonColor}
                  onPress={this.onButtonPress}
                />
              </TouchableOpacity>


              <TouchableOpacity
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="share" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
              <TouchableOpacity
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="whatsapp" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
              <TouchableOpacity
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="download" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
            </View>
            <View
              style={{
                position: 'absolute',
                flexDirection: 'column',

                top: '90%',
                left: 10,
              }}>
              <View
                style={{
                  flexDirection: 'row',
                }}>
                <Text
                  style={{ fontWeight: 'bold', fontSize: 20, color: 'white' }}>
                  {item.title} - {item.price}
                </Text>



              </View>

            </View>

        </View>


        )}
        ListHeaderComponent={this.header}
        stickyHeaderIndices={[0]}
        keyExtractor={ item => item.id}
      />

      </View>
    );
  }
}

Журналы:

 LOG  {"product": [{"__v": 0, "_id": "5e30067e667d8473f8e79726", "color": "sasasa", "colors": [Array], "description": "sassa", "nameImg": "apex-legends-logo-1580205687689.jpg", "nameVid": "videoplayback-1580205687690.mp4", "sellerID": "sasa", "sellerName": "sasa", "size": "sasa", "sizes": [Array], "title": "wqw", "typeImg": "image/jpeg", "typeVid": "video/mp4", "uploadedOn": "2020-01-28T10:01:34.987Z", "urlImg": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/apex-legends-logo-1580205687689.jpg", "urlVid": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/videoplayback-1580205687690.mp4"}, {"__v": 0, "_id": "5e301696f75182463c6874ed", "color": "Space Grey", "colors": [Array], "description": "apple", "nameImg": "61jgfLBydjL._SL1024_-1580209807807.jpg", "nameVid": "videoplayback (1)-1580209807809.mp4", "price": 99900, "sellerID": "13755902031", "sellerName": "Appario", "size": "5.8-inch", "sizes": [Array], "title": "Apple iPhone 11 Pro", "typeImg": "image/jpeg", "typeVid": "video/mp4", "uploadedOn": "2020-01-28T11:10:14.244Z", "urlImg": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/61jgfLBydjL._SL1024_-1580209807807.jpg", "urlVid": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/videoplayback+%281%29-1580209807809.mp4"}, {"__v": 0, "_id": "5e30171df75182463c6874ee", "color": "Haze Blue", "colors": [Array], "description": "oneplus", "nameImg": "61FRLa8IFTL._SL1500_-1580209943294.jpg", "nameVid": "videoplayback-1580209943295.mp4", "price": 53999, "sellerID": "13755902031", "sellerName": "OnePlus", "size": "6.67 inch", "sizes": [Array], "title": "OnePlus 7T Pro", "typeImg": "image/jpeg", "typeVid": "video/mp4", "uploadedOn": "2020-01-28T11:12:29.918Z", "urlImg": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/61FRLa8IFTL._SL1500_-1580209943294.jpg", "urlVid": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/videoplayback-1580209943295.mp4"}], "user": {"__v": 0, "_id": "5e300846241a3b1c89d654c4", "address": [], "changes": [], "checkout": [], "like": [], "mobile": 8697779335, "registeredOn": "2020-01-28T10:09:10.569Z"}}

Пожалуйста, помогите, и укажите мне мою ошибку, пожалуйста, и сделайте скажите мне, если вам нужны какие-либо другие детали

Answer 1

Вам необходимо использовать this.state.data.product в FlatList, потому что продукты находятся в поле продукта в ответе json.

Также вам необходимо установить данные для свойства data в FlatList вместо источника данных.

Поэтому следующая строка:

datasource={this.state.data}

должна быть такой:

data={this.state.data.product}