如何传递获取的ID参数并从JSON API中获取ID-React Native

问题描述 投票:0回答:1
I am building an application where the administrator can check the individual 
employee data from  employee list,but i unable to fetch data according to 
employee id from Employee list API.I get  an error 'Cannot read property "id" 
of undefined '  when i clicked on employee list.If there is any easier ways 
please tell me because i am new in react-native.

{“ message”:“ emp list成功修改”,“ status”:“ 1”,“ empList”:[{“ id”:1“ firstName”:“ Mohd”,“ profEmail”:“ [email protected]”,“ contactNo”:8955303101,“ userId”:2},{“ id”:2“ firstName”:“ manisha”,“ profEmail”:“ [email protected]”,“ contactNo”:8696198931,“ userId”:3},{“ id”:3,“ firstName”:“ rupali”,“ profEmail”:“ [email protected]”,“ contactNo”:9876543211,“ userId”:4},{“ id”:4“ firstName”:“ dcdx”,“ profEmail”:“ [email protected]”,“ contactNo”:9874563211,“ userId”:5},{“ id”:5“ firstName”:“ vf”,“ profEmail”:“ [email protected]”,“ contactNo”:77777777777,“ userId”:6},{“ id”:6“ firstName”:“ vfc vcf v”,“ profEmail”:“ [email protected]”,“ contactNo”:12345678777,“ userId”:7},{“ id”:7“ firstName”:“ mahendra”,“ profEmail”:“ [email protected]”,“ contactNo”:8899776655,“ userId”:8},{“ id”:8“ firstName”:“ Mukesh”,“ profEmail”:“ [email protected]”,“ contactNo”:1234567890,“ userId”:9},{“ id”:9“ firstName”:“ Manish”,“ profEmail”:“ [email protected]”,“ contactNo”:1234567890,“ userId”:10},{“ id”:10,“ firstName”:“ wasim”,“ profEmail”:“ [email protected]”,“ contactNo”:9988778899,“ userId”:11},{“ id”:11“ firstName”:“ Naresh”,“ profEmail”:“ [email protected]”,“ contactNo”:1234567890,“ userId”:12},{“ id”:12“ firstName”:“ Ganesh”,“ profEmail”:“ [email protected]”,“ contactNo”:1234567890,“ userId”:13},{“ id”:13“ firstName”:“ Aashish”,“ profEmail”:“ [email protected]”,“ contactNo”:9988776655,“ userId”:14},{“ id”:14“ firstName”:“ Sunil”,“ profEmail”:“ [email protected]”,“ contactNo”:9988776655,“ userId”:15},{“ id”:15“ firstName”:“ Sunil”,“ profEmail”:“ [email protected]”,“ contactNo”:9988776655,“ userId”:16},{“ id”:16“ firstName”:“ abc”,“ profEmail”:“ [email protected]”,“ contactNo”:122121212121,“ userId”:17},{“ id”:17“ firstName”:“ abc”,“ profEmail”:“ [email protected]”,“ contactNo”:122121212121,“ userId”:18},{“ id”:18,“ firstName”:“ Mahipal”,“ profEmail”:“ [email protected]”,“ contactNo”:9988776655,“ userId”:19},{“ id”:19,“ firstName”:“ Himanshu”,“ profEmail”:“ [email protected]”,“ contactNo”:9988776655,“ userId”:20},{“ id”:20,“ firstName”:“ Narayan”,“ profEmail”:“ [email protected]”,“ contactNo”:9988776655,“ userId”:21},{“ id”:21,“ firstName”:“ Rehaan”,“ profEmail”:“ [email protected]”,“ contactNo”:9988778899,“ userId”:22}]}

    componentDidMount() {
    const url = 'http://104.197.28.169:3000/emplist'
    fetch(url)
   .then(response => response.json())
   .then((responseJson) => {
     this.setState({
      dataSource: responseJson.empList,
      isLoading: false
    })
  })
  .catch(error => console.log(error)) //to catch the errors if any
  }
 render() {
    {
    return (
         <View style={styles.container}>
        <SafeAreaView>
            <FlatList 
            data={this.state.dataSource}
            renderItem={({item}) => 
          <View>
          <TouchableOpacity style={{height:70}} 
          onPress = {() => this.props.navigation.navigate('Employeeeeee' , {id : item.id})}> 

          <Text style={{ fontSize: 15, marginTop: 5, marginLeft: 15 }}>
          {item.firstName}
          </Text>
         <Text style={{ fontSize: 12, marginTop: 5, marginLeft: 15 }}>
         {item.profEmail}
        </Text>                 
    </TouchableOpacity>
     </View>
       }
            keyExtractor={(item, index) => index}
            ItemSeparatorComponent={this.renderSeperator}
          />
        </SafeAreaView>
      </View>
     );
    }
  }


 Other Screen

 componentDidMount() {
  const id_employee = this.props.navigation.state.params.id ;
  const url = 'http://104.197.28.169:3000/empProfile/' + id_employee ; 
  fetch(url)
  .then(response => response.json())
  .then((responseJson) => {
    console.log("response " ,responseJson)
    this.setState({

      dataSource: responseJson , 
      isLoading: false
     })
  })
  .catch(error => console.log(error)) //to catch the errors if any
  }
react-native
1个回答
0
投票
© www.soinside.com 2019 - 2024. All rights reserved.