Реакция TypeError: orders.map не является функцией

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>;
}}

Я не могу найти разницу, которая вызвала бы это исключение.Это массив в обоих случаях.Какие-либо предложения?

РЕДАКТИРОВАТЬ: вот вывод данных ответа:
данные ответа заказа
данные ответа bokstore

Answer 1

Из этих изображений похоже, что заказы обрабатываются как обычный текст и не анализируются в JSON.Убедитесь, что ваш бэкэнд указывает необходимые заголовки Content-Type: application/json, чтобы axios правильно проанализировал данные.

В качестве альтернативы вы можете проанализировать текст на стороне клиента с помощью JSON.parse(res.data)