Question

export default class Home extends Component{

    constructor(){
        super();
        const ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2})
        this.state={
            userDataSource:ds,
        }
    }
componentDidMount(){

        fetch('http://192.168.0.102/giftbaenew/rest/V1/products?searchCriteria[filter_groups][0][filters][0][field]=category_id&searchCriteria[filter_groups][0][filters][0][value]=10',{
            headers:{
                'Authorization':'Bearer 7dmc9lprh5b1t07hkadyhmtb6etm1jaj'
            }
        })
        .then((response)=>{return response.json()})
        .then((responseData)=>{  
            alert(responseData)  // i get the alert message.
            this.setState({
                userDataSource:this.state.userDataSource.cloneWithRows(responseData)
            })
        })
    }
 renderRow(user,sectionId,rowId,highlightRow){

        const data=this.state.userDataSource
        return(
            <View >
                <Text style={{color:'black'}}>
                    {data.items[0].name} //error 
                </Text>
            </View>
        )
    }
    render(){

        return(
            <ScrollView>
                <View>
                    <View style={styles.container}>
                        <TouchableOpacity onPress={()=>{this.props.navigation.navigate('Login')}}>
                            {/* <Text style={{textAlign:'right',marginTop:5,color:'white',fontSize:16}}>Logout</Text> */}
                            <Image source={require('../Images/logout.png')} style={{width:30,height:30,marginLeft:325}}/>
                        </TouchableOpacity> 

                        <Text style={styles.text}>
                            ShakeHands
                        </Text>            

                        <TextInput placeholder='Search' placeholderTextColor='black'   style={{backgroundColor:'white',marginTop:13,height:35,width:320,marginLeft:20,marginRight:20,padding:10}}/>    

                    </View>
                    <View style={{marginTop:10}}>
                    <ListView dataSource={this.state.userDataSource} renderRow={this.renderRow.bind(this)}/>
                    </View>
                </View>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        backgroundColor:'#455a64',
        height:125
    },
    text:{
        textAlign:'left',
        fontSize:25,
        color:'white',
        marginTop:0,
        marginLeft:18
    }
})

我在我的应用上看不到任何东西。请帮帮我。 items []是JSON数据的数组，每个项目都有其属性，例如name等我正在尝试显示名称，但未显示任何内容。错误未定义不是评估data.items [0]

的对象

Answer 1

请尝试我的代码，它将彻底解决您的问题

 import React, { Component } from 'react';
    import { FlatList, ActivityIndicator, Text, View  } from 'react-native';

export default class FetchExample extends React.Component {

  constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }

  componentDidMount(){
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson.movies,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }



  render(){

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

    return(
      <View style={{flex: 1, paddingTop:20}}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => <Text>{item.title}, {item.releaseYear}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}

无法从JSON数组提取任何属性

1 个答案: