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

Posted 2023-03-08

【中文标题】无法从 React Native 中的 JSON 数组正确获取数据

【英文标题】：Unable to fetch data correctly from JSON array in React Native

【发布时间】：2019-06-25 21:11:53

【问题描述】：

  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 并非如此。 responseJson.data[0].post_type 仅从 JSON 数组中获取第一个对象的 post_type。我还在extraData 中添加了this.state.post_type。

请告诉我如何从 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,  
                    />

       
     ); 

【问题讨论】：

JSON.parse(JSON.stringify(responseJson)); 真的很奇怪，虽然这不是你的问题。有什么意义？

当post_type 为image 时，我希望我的图像显示在屏幕上，当post_type 为video 时，我希望我的图像显示在屏幕上的视频上。但是post_type只能从json数组的第一个对象访问。

你能告诉我们你的渲染方法吗？

@ShubhamBisht 那么你应该尝试正确解释这个问题。我什么都听不懂？？？？

@ShubhamBisht 你真的需要努力解释你的问题。除非您努力发布经过精心编辑的问题，否则没有人可以帮助您。一些问得好问题的例子 - ***.com/q/54257762/6141587 或 ***.com/q/50603994/6141587

【参考方案1】：

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

 <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> source 之后，我给出了两种来源方式

【讨论】：

其实我在_renderItem里面有一个很长的代码。因此我没有发布整个代码，只发布了Image 和Video 组件。如果我按照你的方式尝试，我的代码会很大，因为_renderItem 中的大部分代码都会重复