Реагируйте и this.props.results.map не является функцией

Question

после попытки выставить простой поиск в логах покажи это:

все выглядит очень хорошо и стандартизировано, поэтому пару поисков, у меня все еще есть идея, почему эта ошибка происходит.

я пробовал с fetch и тот же результат

пожалуйста, кто-нибудь может объяснить, почему происходит эта ошибка?

код:

import React, { Component } from "react";
import axios from "axios";

import Suggestions from "./suggestions";

class Search extends Component {
  constructor(props) {
    super(props);

    this.state = {
      term: "",
      error: false,
      results: []
    };
  }

  onChange(e) {
    this.setState(
      { term: e.target.value },

      () => {
        axios
          .get("/search?q=" + this.state.term)
          .then(res => this.setState({ results: res.data }))
          .catch(() => this.setState({ error: true }));
      }
    );
  }

  render() {
    return (
      <div id="searchbox">
        <div>
          <form>
            <input
              ref={input => {
                this.search = input;
              }}
              value={this.state.term}
              onChange={this.onChange.bind(this)}
              type="text"
              placeholder="Search..."
            />

            <button type="submit">
              <i className="search icon" />
            </button>
            <Suggestions results={this.state.results} />
          </form>
        </div>
      </div>
    );
  }
}

export default Search;

предложение

import React from "react";

const Suggestions = props => {
    const resultList = props.results.map(r => <li key={r.id}>{r.title}</li>);
    return <ul>{resultList}</ul>;
};

export default Suggestions;

ответ

Answer 1

res.data даст вам весь проанализированный JSON-ответ, но вместо него вы захотите получить массив, который является значением свойства posts.

axios
  .get("/search?q=" + this.state.term)
  .then(res => this.setState({ results: res.data.posts }))
  .catch(() => this.setState({ error: true }));

Answer 2

ИМО вам нужно использовать

axios
          .get("/search?q=" + this.state.term)
          .then(res => this.setState({ results: res.data.posts }))
          .catch(() => this.setState({ error: true }));

а не

axios
          .get("/search?q=" + this.state.term)
          .then(res => this.setState({ results: res.data }))
          .catch(() => this.setState({ error: true }));