Как вывести запрашиваемые данные из JSON (Reactjs api call)?

Question

[Brake Made]

Доброго времени суток.
Начал изучение API call на ReactJs.
Данные из JSON вывел , без каких либо проблем, но вот теперь хочу сделать вывод данных по запросу который вводят в Input.
И не совсем понимаю, как это в Reactjs можно реализовать.
Вот код :

сlass SearchHub extends Component{

    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            items: []
          };
        }
    

    componentWillMount(){
        fetch(`http://localhost:8080/api/users/`)
        .then((response) => response.json())
        .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result.items
              });
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
        .catch(error => console.log('parsing failed', error))
    }

    handleSumbit(e){
        e.preventDefault();
        this.componentDidMount(this.refs.name.value);
    }

 

    render(){
        const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
      <div>
        <div className="searchlanding">
            <div className="input-button-form">
            <Input 
                leftIcon={<Icon name="search" />} 
                width="1000px" 
                placeholder="Введите Фамилию и Имя"
                /> {' '}
                <Button use="primary">Найти</Button>
            </div>
        </div>
        <div className="table-result">
          <ul>
            {items.map(item => (
              <li key={item.name}>
                  {item.rating.totalLove}
                  <img src={item.avatarUri} alt="Фото" className="round-photo"/>
                  {item.name} 
              </li>
            ))}
          </ul>
        </div>
    </div>
        );
    }
  }
}

export default SearchHub;

На данный момент при загрузке страницы он выводит вообще все данные которые имеются в JSON.
В JSON поиск идет только по имени и фамилии которые находятся в "name".
Подскажите, как это можно реализовать?
Буду рад примерам на codepan или альтернативным вариантам!

Answer 1

[Анатолий Жаров]

handleInputChange(e) {
    let inputValue = e.target.value;
    clearTimeout(this.timeout);
    setTimeout(_ => this.fetchUsers(inputValue), 1000);
}

fetchUsers(value) {
     this.setState({isLoaded: false});
     axios.get(`url_to_get_users_by_name`, {param: value})
        .then((response) => response.json())
        .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result.items
              });
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
        .catch(error => console.log('parsing failed', error))
}

Comments

[Антон Спирин]

Если вы хотели сделать debouncing в хандлере, то сделали его неправильно. Вы никуда не пишите таймаут и каждый раз определяете новый. Исправить можно так:

handleInputChange = e => {
  const { value } = e.target;

  clearTimeout(this.timeout);
  this.timeout = setTimeout(() => this.fetchUsers(value), 1000);
};

Так же неправильно использовать нижнее подчеркивание когда отсутсвуют аргументы. Его используют для неиспользуемых аргументов в кейсах вроде:
(_, props) => props.id;

[Анатолий Жаров]

Антон Спирин, согласен насчет сохранения таймаута, недосмотрел. Насчет

неправильно использовать нижнее подчеркивание когда отсутсвуют аргументы.

- это ваше субъективное мнение. Мне проще написать одно подчеркивание, чем две скобочки

[Антон Спирин]

Анатолий Жаров, ну это не мое мнение, а стандарт принятый в JS сообществе. Как минимум, такой код не пропустит линтер с правилом no-unused-vars.
Смотрите тут с первого взгляда видно, что аргументов нет, какой бы большой функция не была:

() => {
  // some big function stuff
};

А тут мало того, что это видно только вам, так еще и определяется локальная переменная _, которая не используется:

_ => {
    // some big function stuff
};

[Brake Made]

Анатолий Жаров, Большое спасибо, Анатолий. Хотел бы последний вопрос задать, а что на input с button поставить?

[Анатолий Жаров]

DanilAndreevich, на input нужно повесить обработчик onChange={this.handleInputChange.bind(this)}, кнопку можно убрать

[Анатолий Жаров]

Антон Спирин, согласен, буду переприучиваться

[Brake Made]

Анатолий Жаров, Что самое интересное, при запуске вашего кода, у меня полностью пропадает Input. Хм.

[Анатолий Жаров]

DanilAndreevich, есть возможность показать код обертки Input?

[Brake Made]

Анатолий Жаров, самое интересное , что даже если использовать чистый input , он так и не прогружается :)
Я создаю его чистым, накидывая только onChange

[Анатолий Жаров]

DanilAndreevich, да, странновато. В консоли ничего необычного?

[Brake Made]

Анатолий Жаров, пусто!: - )
Сам шокирован, по сути , у меня появляется надпись Loading... , и на этом все :(

[Анатолий Жаров]

DanilAndreevich, componentWillMount следует оставить (правда лучше переименовать в componentDidMount)

[Brake Made]

DanilAndreevich, Могу сказать точно, что проблема в блоке с call на api. Скорее всего с axios . Ставлю когда fetch , все работает

[Анатолий Жаров]

DanilAndreevich, axios это библиотека - альтернатива fetch, чтоб с ней работало нужно ее установить и сделать импорт. Вполне можно использовать fetch =)