значение текстового поля не передается вызову API

Question

Я перешел по ссылке ниже и попытался сделать документ https://www.reddit.com/r/reactjs/comments/82mxz3/how_to_make_an_api_call_on_props_change

В панели поиска я создал текстовое поле, и я получаю значение, но в index.js, когда я даю componentWillRecieveProps и печатаю значения впередать его API, но ничего не печатать. Можете ли вы рассказать мне, как это исправить. Ниже приведена обновленная песочница кода и фрагмент кода.

https://codesandbox.io/s/eloquent-galielo-14874

//import React from "react";
import ReactDOM from "react-dom";
import React, { Fragment, useState, Component } from "react";

import "./styles.css";



class SearchBar extends Component {
  state = {
    groupCheckBoxValues: [],
    groupRadioValue: "PRO"
  };

  getInitialState() {
    return { value: "Hello!" };
  }
  handleChange(event) {
    console.log("handleChange", event.target.value);

    this.setState({ value: event.target.value });
  }

  componentWillReceiveProps({ search }) {
    console.log(search);
  }

  componentDidMount() {
    this.fetchdata("story");
  }

  fetchdata(type = "", search_tag = "") {
    var url = "https://hn.algolia.com/api/v1/search?tags=";
    fetch(`${url}${type}&query=${search_tag}`)
      .then(res => res.json())
      .then(data => {
        this.props.getData(data.hits);
      });
  }

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

export default SearchBar;

Answer 1

Прочтите эту статью и попробуйте правильно загрузить.

Нажмите здесь, чтобы прочитать статью

Answer 2

В вашей демонстрации есть ошибки.
Функция setState не будет работать, потому что вы не привязали ее к своему компоненту.
UNSAFE_componentWillReceiveProps () является небезопасной функцией. Это скоро будет устаревшим.
И вы не должны использовать ловушку {useState} в компоненте класса.
Я думаю, вам следует проверить некоторые учебники для получения данных с сайтаactjs. Это предоставит вам некоторые хорошие практики:)

Answer 3

Вы на самом деле не передаете значение ввода текста в запрос на выборку.

Я рекомендую что-то вроде этого:

class SearchBar extends Component {

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

Я удалил состояние и все, потому что это не таккажется совершенно уместным к вопросу.