首页 文章

React TypeError:orders.map不是函数

提问于
浏览
0

我是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 回答

  • 1

    从它们的图像看起来 orders 被处理为纯文本而不是解析为JSON . 检查您的后端是否指定了所需的标头 Content-Type: application/json ,以便 axios 将正确解析数据 .

    或者,您可以使用 JSON.parse(res.data) 解析文本客户端

相关问题