Question

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

Answer 1

根据它们的图像，看起来订单被视为纯文本而不是解析为JSON。检查后端是否指定了必需的标头Content-Type: application/json，以便axios将正确解析数据。

或者，您可以使用JSON.parse(res.data)

解析客户端文本

反应TypeError：orders.map不是一个函数

1 个答案: