Невозможно получить данные правильно из массива JSON в React Native - PullRequest
Новая
       10

Невозможно получить данные правильно из массива JSON в React Native

0 голосов
/ 01 февраля 2019 
  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.

enter image description here

Это то, что я получаю, когда я alert(responseJson.data).Теперь мои responseJson.data[0].imgSrc и responseJson.data[0].video выполняют итерацию каждого объекта, и я могу отображать его на своем экране с помощью Flatlist.Но это не так в responseJson.data[0].post_type.responseJson.data[0].post_type извлекает только post_type первого объекта из массива JSON.Я также добавил 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,  }}
                    />

       }
     ); 
}

1 Ответ

0 голосов
/ 01 февраля 2019

Вы можете проверить, работает ли это или нет? 

 <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> после источника есть два исходных способа, которые я дал

...