Javascript 未捕获的类型错误：this.state.data.map 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39329100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: this.state.data.map is not a function
提问by Ang
I am new to React, have seen some of the similar issues, but didn't find why this happens. I am getting an “Uncaught TypeError: this.state.data.map is not a function”. Here is the code. Please, help to find what is the problem.
我是 React 的新手，见过一些类似的问题，但没有找到为什么会发生这种情况。我收到“未捕获的类型错误：this.state.data.map 不是函数”。这是代码。请帮忙看看是什么问题。
class Audienses extends React.Component {
constructor (props)
{
super(props);
this.state = {
data: ''
};
this.loadFromServer = this.loadFromServer.bind(this);
this.childeDelete = this.childeDelete.bind(this);
this.childeEdit = this.childeEdit.bind(this);
}
loadFromServer () {
var xhr = new XMLHttpRequest();
xhr.open('get', this.props.url, true);
xhr.onload = function() {
var data = JSON.parse(xhr.responseText);
this.setState({ data: data });
}.bind(this);
xhr.send();
}
componentDidMount() {
this.loadFromServer();
}
render () {
var audienses = this.state.data.map((value, index) => (
<OneElement key={value.id} audience={value.audience} description={value.description} />
));
/* or like this
var audienses = this.state.data.map(function(s) {
<OneElement key={s.id} audience={s.audience} description={s.description} onDeleteClick={this.childeDelete} oneEditClick={this.childeEdit} />
}).bind(this);
*/
return
<div>
<h1>Audiences</h1>
<table id="services">
<tr>
<th>Audience</th>
<th>Description</th>
<th></th>
<th></th>
</tr>
<tbody>
{audienses}
</tbody>
</table>
</div>;
}
}
回答by Alexander T.
Your initial datastate is String., Stringdoes not have method .map, you need change your initial state from ''to []
您的初始data状态是String.，String没有方法.map，您需要将初始状态从更改为''[]
this.state = { data: [] };
回答by Jan Franz Palngipang
.mapis not applicable to a String object. Consider changing 'data' to an array. .mapis a method that calls a function on every element of an array.
.map不适用于 String 对象。考虑将“数据”更改为数组。.map是一种对数组的每个元素调用函数的方法。
回答by Prakash Karena
I have the same error in react-redux.
我在 react-redux 中也有同样的错误。
problem was when I add new product in add/product page and click on the back button then the component of the home page is showing this error
问题是当我在添加/产品页面中添加新产品并单击后退按钮时，主页的组件显示此错误
home_container.js:8 Uncaught TypeError: products.product.map is not a function
home_container.js:8 Uncaught TypeError: products.product.map 不是函数
renderItems = (products) => (
products.product ?
products.product.map(item => (
<ProductItem {...item} key = { item._id } />
))
: null
)solution
解决方案
I am passing {} instead of [] from the node server
我从节点服务器传递 {} 而不是 []
So, when you have this type of error in react-redux then first check what you are passing from the server into that field and also check reducers of that particular component.
因此，当您在 react-redux 中遇到此类错误时，首先检查您从服务器传递到该字段的内容，并检查该特定组件的减速器。
