时间戳

首页 > 解决方案 > 无法从 React Native 中的 JSON 数组正确获取数据

android - 无法从 React Native 中的 JSON 数组正确获取数据

问题描述

  showPosts = async () => {

    var userID = await AsyncStorage.getItem('userID');

    fetch(strings.baseUri+"getPostWithUserID", {
        method: 'POST',
        headers: {
           Accept: 'application/json',
           'Content-Type': 'application/json'
        },
        body: JSON.stringify({ 
            "user_id": userID
        })
        })
        .then((response) => response.json())
        .then((responseJson) => {

        let jsonObj = JSON.parse(JSON.stringify(responseJson));

        if (jsonObj.status=="true") {

            this.setState({ 
                data: responseJson.data, 
                imageSrc: responseJson.data[0].imgSrc, 
                post_type: responseJson.data[0].post_type,
                videoSrc: responseJson.data[0].video,
            });
        }        
    })
        .catch((error) => {
            console.error(error);
        });
  }

我从 api 获取数据，然后在 Flatlist 中使用它。

在此处输入图像描述

这就是我得到的alert(responseJson.data)。现在，我的responseJson.data[0].imgSrc和responseJson.data[0].video迭代每个对象，我可以通过 Flatlist 在我的屏幕上显示它。但在responseJson.data[0].post_type. 仅从JSON 数组中responseJson.data[0].post_type获取第一个对象。post_type我也加this.state.post_type进去了extraData。

请告诉我如何从 Json 数组中访问数据，然后在 Flatlist 中使用它。

更新代码

    <FlatList 
        data={this.state.data}
        renderItem={ ({item,index}) =>  this._renderItem(item,index)  }
        extraData={[ this.state.data, this.state.checked, this.state.post_type ]}
    />

_renderItem = ( item, index ) => {

return(

{ item.post_type == "image" ? 

                    <Image 
                        //source={this.props.item.image} 
                        source={image}}
                        //source={{ uri: strings.sourceUri+"userimage/"+item.imgSrc }}
                        style={styles.photo}
                    />

                    :

                    <Video 
                        source={video}
                        ref={(ref) => { this.player = ref }}   
                        style={{  width: 300,  height: 350,  }}
                    />

       }
     ); 
}

标签： androidreactjsreact-nativereact-native-flatlist

解决方案

你能检查一下这是否有效吗？

 <FlatList 
    data={this.state.data}
    renderItem={ ({item,index}) =>  this._renderItem(item,index)  }
    extraData={[ this.state.data, this.state.checked, this.state.post_type ]}
/>

_renderItem = ( item, index ) => {
    if( item.post_type === "image")
     return(
                <Image 
                    //source={this.props.item.image} 
                    source={image}
                    //source={{ uri: strings.sourceUri+"userimage/"+item.imgSrc }}
                    style={styles.photo}
                />);

     else
            return(
                <Video 
                    source={video}
                    ref={(ref) => { this.player = ref }}   
                    style={{  width: 300,  height: 350,  }}
                />);

}

还可以看到，在<Image>源代码之后，我给出了两种来源方式

推荐阅读