从API获取日志但未呈现

崔娜·楚杜里

我一直在尝试从API提取数据,但是日志似乎显示了responseJSON,但是它没有出现在前端。

这是我获取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);
      });
  }

这是我的reandermethod()

 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"}}

请帮助,并指出我的错误,如果您需要任何其他详细信息,请告诉我

苏莱曼·萨

您需要this.state.data.product在FlatList中使用,因为产品位于json响应的product字段中。

另外,您需要将数据设置为FlatList中data属性,而不是数据源。

所以下面这行:

datasource={this.state.data}

必须是这样的:

data={this.state.data.product}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

路径更改但未呈现组件

来自分类Dev

React-api数据已成功传递给组件(每个检查器),但未呈现

来自分类Dev

角材料Sidenav呈现但未显示

来自分类Dev

我应该如何呈现获取API的多状态组件?

来自分类Dev

从POST API获取数据后呈现功能组件?

来自分类Dev

Docker API v1.40获取容器日志

来自分类Dev

hadoop mapreduce-用于获取作业日志的API

来自分类Dev

被击中但未呈现到页面的.NET MVC视图

来自分类Dev

反应路由器更改URL,但未呈现组件

来自分类Dev

尝试呈现JSX元素但未定义

来自分类Dev

Django URL更改但未呈现正确的视图

来自分类Dev

users#create工作正常,但未呈现任何内容

来自分类Dev

被击中但未呈现到页面的.NET MVC视图

来自分类Dev

链接到已更改的 URL 但未呈现的组件

来自分类Dev

form_with 执行操作但未正确呈现页面

来自分类Dev

区域语言可用的语言环境,但未在日志中显示

来自分类Dev

PowerShell从Jobs获取日志

来自分类Dev

获取Windows日志

来自分类Dev

获取 Kubernetes FlexVolume 日志

来自分类Dev

从 LoggerFactory 获取日志

来自分类Dev

Tabulator 4.5从api获取数据,但不使用数据呈现表

来自分类Dev

如何在 NodeJs 中的 API 获取请求成功时呈现到新的 HTML 页面?

来自分类Dev

如何通过 api 获取数据并用它呈现子组件 - 反应谷歌地图

来自分类Dev

在 API 中呈现资源

来自分类Dev

禁用Spring日志以获取可读日志

来自分类Dev

如何获取呈现了UINavigationController的UIViewController

来自分类Dev

PHP获取呈现的Javascript页面

来自分类Dev

使用graph-facebook-api获取应用活动日志

来自分类Dev

JIRA REST API获取工作日志-“您无权查看指定的问题”

Related 相关文章

热门标签

归档