我是React的佼佼者 . 我正在尝试获取有关订单的数据数组,这些数据正在运行,然后将其映射以显示有关每个订单的特定信息 . 我得到TypeError:orders.map在我的应用程序中不是函数异常 . 这是我的代码:
class Orders extends Component {
state = {
orders: []
};
componentDidMount() {
axios
.get("https://localhost:9090/orders")
.then(res => {
this.setState({ orders: res.data });
console.log(res.data);
});
}
render() {
const { orders } = this.state;
const orderList =
this.state.orders.length > 0 ? (
orders.map(o => {
return (
<div key={o.orderId}>
<p>
{o.isbn}
</p>
</div>
);
})
) : (
<div className="row p-5 m-5">
<div className="offset-sm-5 col-sm-2 text-center">
<span className="text-grey r">Loading...</span>
</div>
</div>
);
return <div className="container">{orderList}</div>;
}}
有趣的是,我有类似的代码,这是有效的 . 唯一的区别基本上是它的提取 . 这是代码:
class BookList extends Component {
state = {
books: []
};
componentDidMount() {
console.log(this.props.match.params.search_term);
axios
.get("https://localhost:8080/search?searchTerm=" + search_term)
.then(res => {
this.setState({ books: res.data });
console.log(res.data);
});
}
render() {
const { books } = this.state;
const booksList =
this.state.books.length > 0 ? (
books.map(b => {
return (
<div key={b.isbn} className="card">
<div className="card-body">
<h5 className="card-title">
<Link to={"/details/" + b.isbn}>{b.title}</Link>
</h5>
<div className="card-subtitle text-muted">
{b.author} ({b.year}) /{" "}
<span className=" text-danger">{b.category}</span>
</div>
<p />
</div>
</div>
);
})
) : (
<div className="row p-5 m-5">
<div className="offset-sm-5 col-sm-2 text-center">
<span className="text-grey r">Loading...</span>
</div>
</div>
);
return <div className="container">{booksList}</div>;
}}
我找不到会导致该异常的差异 . 在这两种情况下都是一个数组 . 有什么建议?
编辑:这是响应数据的输出:
response data of order
response data of bokstore
1 回答
从它们的图像看起来 orders 被处理为纯文本而不是解析为JSON . 检查您的后端是否指定了所需的标头
Content-Type: application/json
,以便axios
将正确解析数据 .或者,您可以使用
JSON.parse(res.data)
解析文本客户端