这是因为fetch函数是异步的。所以，您只需要添加一个简单的条件并通过
**在我的代码中，我得到一个错误，说"this.state.leader.map"不是函数。
我在网上搜索我的问题，但没有一个能解决我的问题。
这是我的代码，在下面。我希望，代码清晰易懂**
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>
);
}
}
您的问题是在您的状态中将字符串设置为leader的值。
如果我们查看您的代码，您将获得leaders的子字符串。为此，leaders必须是一个字符串。然后将该字符串保存为状态中的leader值。
.then(leaders => {
const str = leaders.substring(76);
const str2 = str.substring(0, str.length - 9); // <- this is a string
this.setState({ leader: str2 });
})
在您的状态下，您正在以以下方式设置leaders
state = {
leaders: [] // <- this is an array
}
单独做这些事情是可以的，但您在fetch请求中正在做的事情和您在renderAll方法中想要做的事情之间存在脱节，因为您不能在字符串上使用.map。
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
}
要么您需要在提取请求中更改leader中存储的内容，使其成为一个数组。或者，您需要更改renderAll函数中发生的内容。
XML解析
如果您的XML与您在评论中的内容相同
<?xml version="1.0" encoding="utf-8"?>
<string xmlns="url">[{"Ref":"IHR1900299","Unvan":"max"},{"Ref":"IHR1900298","Unvan":"max2"}] </string>
然后，您可以使用一个简单的regex来捕获您想要的内容，然后使用JSON.parse将其转换为json。
一旦您将xml作为字符串，就可以执行以下操作：
// 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)React组件的常用方法(如componentWillMount或render)由React自动绑定到this，与您的自定义方法renderAll相反。在你的课堂上添加以下内容：
constructor(props) {
super(props);
this.renderAll = this.renderAll.bind(this);
}
有用的链接：
- 关于
bind关键字的文档 - React与
this的结合 - 相关问题：React Native：绑定和"this">
- 相关问题：在react native中作为道具传递函数时，如何绑定(this)
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>
);
}
renderAll方法需要返回一个JSX元素才能正确。此外，我重新格式化了方法，使用箭头函数来避免所有那些讨厌的绑定问题。此外：您需要为每个项目提供一个唯一的密钥。
renderall = () => {
return (
<View>
{this.state.leader.map(alb => {
return <Text key={alb.Ref}>{alb.Ref}</Text>;
})}
</View>
}