Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.76/25: Рейтинг темы: голосов - 25, средняя оценка - 4.76
1 / 1 / 2
Регистрация: 07.11.2017
Сообщений: 3

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

12.02.2018, 18:08. Показов 5041. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток.
Начал изучение API call на ReactJs.
Данные из JSON вывел , без каких либо проблем, но вот теперь хочу сделать вывод данных по запросу который вводят в Input.
И не совсем понимаю, как это в Reactjs можно реализовать.
Вот код :
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
class SearchHub extends Component{
 
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            items: []
          };
        }
    
  
        handleInputChange = e => {
          const { value } = e.target;
        
          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => this.componentWillMount(value), 1000);
        };
        
        componentWillMount(value){
          this.setState({isLoaded: false});
          fetch(`http://localhost:8080/api/users/`,{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))
  }
 
 
    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="h1-searchlanding">
                <a>Найти свои показатели</a>
            </div>
            <div className="input-button-form">
            <Input 
                leftIcon={<Icon name="search" />} 
                width="1000px" 
                placeholder="Введите Фамилию и Имя"
                onChange={this.handleInputChange.bind(this)}
                /> {' '}
                <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 файла.
Подскажите, что не так?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
12.02.2018, 18:08
Ответы с готовыми решениями:

Как вывести из JSON API все данные с username
Добрый день, прошу помощи. Решил сделать сайтик, который будет из публичного API одной игры вытаскивать информацию. Этот запрос...

Как вывести JSON результат API запроса в textbox?
Как вывести результат API запроса (значение ui_bid) в textbox ? using System; using System.Collections.Generic; using...

API json получить данные
Добрейшее... Имею запрос API По адресу:API Запрос public class Root { public bool success { get; set; } ...

1
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
12.02.2018, 18:41
Цитата Сообщение от DanilAndreevich Посмотреть сообщение
this.componentWillMount(value)
это не сработает. componentWillMount - это не просто функция, а зарезервированный реактом метод жизненного цикла, который срабатывает только 1 раз до полного рендера (до вызова метода render()), к тому же она не принимает никаких аргументов.

Вынесите функцию, которая делает fetch запрос отдельным методом и вызывайте его в componentWillMount и в handleInputChange.

Другой вариант - грузить данные с сервера 1 раз, а поиск сделать на стороне клиента. Если данных будет не много и нет никакой дополнительной серверной логики, то этот вариант отлично подойдет
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
12.02.2018, 18:41
Помогаю со студенческими работами здесь

Как вывести данные JSON через PHP?
Есть ссылка на JSON код http://188.225.25.159:6734/api/diets Получаю его таким образом: $json =...

Как вывести нужные данные из JSON используя PHP
мне надо достать то что содержится в message. { &quot;data&quot;: , &quot;paging&quot;: { &quot;cursors&quot;: { ...

Как вывести данные из input на экран в формат json?
Добрый день всем! Очень нужна ваша помощь!!! Скажите пожалуйста, как вывести данные из input на экран в формат json?

Как вывести некоторые данные из файла json на страницу html?
Как с помощью JavaScript вывести некоторые данные из файла json на страницу html ? Нужно вывести данные &quot;city&quot;,...

Как распарсить данные из первого json-а и перекинуть их в другой json
Добрый день, столкнулся с такой задачей. Есть вот такой json Необходимо извлечь некоторые данные, провести некоторые...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru