Reputation: 2563
**In this my code, I got an error which says 'this.state.leader.map' is not a function.
I searched on web about my problem but none of them solved my issue.
This is my code which is below. I hope, code is clear to understand easly**
import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';
import DOMParser from 'react-native-html-parser';
import axios from 'axios';
export default class header extends Component {
state = { leader: [] };
componentWillMount() {
fetch('url')
.then(response => {
if (response.ok) {
return response;
}else {
let error = new Error('Error ');
error.response = response;
throw error;
}
},
error => {
let errmess = new Error(error.message);
throw errmess;
})
.then(response => response.text())
.then(leaders => {
const str = leaders.substring(76);
const str2 = str.substring(0, str.length - 9);
this.setState({ leader: str2 });
})
.catch(error => {
this.setState({ errMessage: error.message });
});
}
renderall() {
return this.state.leader.map(alb => <Text>{alb.Ref}</Text>
}
render() {
console.log(this.state.leader);
return (
<View>
{this.renderall()}
</View>
);
}
}
Upvotes: 2
Views: 1884
Reputation: 28539
You issue is with the fact that you are setting a string to the value of leader
in your state.
If we look at your code you are taking a substring of leaders
. To do this leaders
must be a string. You are then saving that string to your leader
value in state.
.then(leaders => {
const str = leaders.substring(76);
const str2 = str.substring(0, str.length - 9); // <- this is a string
this.setState({ leader: str2 });
})
In your state you are setting leaders
in the following way
state = {
leaders: [] // <- this is an array
}
Individually doing these things are fine, but there is a disconnect between what you are doing in your fetch
request and what you then want to do in your renderAll
method as you cannot use .map
on a string.
renderall() {
return this.state.leader.map(alb => <Text>{alb.Ref}</Text>
// .map requires this.state.leader to be an array but you
// have now changed it to a string so it won't work
}
Either you need to change what you are storing in leader
in your fetch request so that it is an array. Or you need to change what is happening in your renderAll
function.
If your XML is the same as you put in your comment
<?xml version="1.0" encoding="utf-8"?>
<string xmlns="url">[{"Ref":"IHR1900299","Unvan":"max"},{"Ref":"IHR1900298","Unvan":"max2"}] </string>
Then you could use a simple regex to capture what you want and then use JSON.parse
to convert it into json.
Once you have your xml as a string, you could do this:
// I'm hardcoding it as a string, because I don't have your api to call.
let xmlString = '<?xml version="1.0" encoding="utf-8"?> <string xmlns="url">[{"Ref":"IHR1900299","Unvan":"max"},{"Ref":"IHR1900298","Unvan":"max2"}] </string>';
let jsonString = xmlString.match(/\[.*\]/);
let json = JSON.parse(jsonString);
console.log(json)
console.log(json[0].Ref)
Upvotes: 1
Reputation: 6379
Your renderAll method needs to return a single JSX element in order to be correct. Additionally I reformatted the method to use arrow functions to avoid all those nasty binding issues. Also: you need to provide a unique key to each of the items.
renderall = () => {
return (
<View>
{this.state.leader.map(alb => {
return <Text key={alb.Ref}>{alb.Ref}</Text>;
})}
</View>
}
Upvotes: 0
Reputation: 2046
This happen because the fetch function is asynchronous. So, all you need is to add a simple condition and passing this
:
renderall() {
return this.state.leader.map(alb => <Text>{alb.Ref}</Text>
}
render() {
console.log(this.state.leader);
return (
<View>
{
(this.state.leader?this.state.leader.length>0:false)&&
this.renderall(this)
}
</View>
);
}
Upvotes: 0
Reputation: 18561
React component usual methods (like componentWillMount
or render
) are automatically bound to this
by React, contrary to your custom method renderAll
. Add the following to your class:
constructor(props) {
super(props);
this.renderAll = this.renderAll.bind(this);
}
Useful links:
bind
keywordthis
in ReactUpvotes: 1