когда я набираю историю в моем текстовом поле, он должен ударить этот API

Question

• когда я набираю историю в моем текстовом поле, должно появиться это API, https://hn.algolia.com/api/v1/search?tags=story
• данные должны отображаться в браузере.
• , но сейчас вызов не происходит.
• весь соответствующий код находится в searchbar.js
• Можете ли вы сказать мне, как это исправить.
• предоставив мой фрагмент кода и песочницу ниже.

https://codesandbox.io/s/adoring-swanson-ioy2u

class SearchBar extends Component {
  async searchByKeyword({ target }) {
    await this.getQuery("story", target.value);
  }

  async componentDidMount() {
    await this.getQuery("story", "butts");
  }

  getQuery = async (type = "", search_tag = "") => {
    var url = "https://hn.algolia.com/api/v1/search?tags=";
    const resp = await fetch(`${url}${type}&query=${search_tag}`);
    return resp.json();
  };

  render() {
    return <input type="text" onChange={this.searchByKeyword} />;
  }
}

Answer 1

Я обновил вашу песочницу .

Ваш метод searchByKeyword не привязан к компоненту SearchBar, из-за которого this не было определено внутри метода. При добавлении этого кода работает:

constructor(props) {
    super(props);

    this.searchByKeyword = this.searchByKeyword.bind(this);
}

При каждой выборке данных ваши данные отправляются в onFetch prop компонента SearchBar. Эти данные обрабатываются вашим App компонентом:

<SearchBar onFetch={this.onFetch} />

, где данные установлены в состояние. Это состояние представлено под поисковым вводом.