Невозможно привязать данные API к this.setState в React JS с помощью fetch

Я новичок в React JS, и у меня проблема с отображением данных в таблице с помощью вызова API извлечения. Могу получить данные JSON, но не могу привязать данные к объекту this.State. Это всегда вызывает следующую ошибку.

index.bundle.js: 49 Uncaught ReferenceError: пользователи не определены

Могу я узнать, что делаю не так. Вот мой код.

import React, {Component} from "react";
import { Badge, Row, Col, Card, CardHeader, CardBlock, Table, Pagination, PaginationItem, PaginationLink} from "reactstrap";

class Users extends Component {


  constructor(){
     super();
     this.state = {users:[]};
  }

  componentDidMount(){

     fetch('http://some_ip_address/api/subuserlist',{
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'filterfield': 'group_id',
          'filtervalue': 'random_filter_value'
        }
     }).then(result=>result.json())
       .then(function(data) {
          console.info(data);           //able to print data
          this.setState({users:data});
          console.info(users);        //unable to print users
       }.bind(this))    
       .catch(function(error) {
         // If there is any error you will catch them here
       });   
  }

  render() {
      return (
        <div className = "animated fadeIn">
         <Row>
          <Col>
            <Card>
              <CardHeader>
                <i className = "fa fa-align-justify"></i> Combined All Table
              </CardHeader>
              <CardBlock className = "card-body">
                <table>
                  <tbody>
                   {this.state.users && this.state.users.map(function(users) {                  
                      return (
                          <tr>
                              <td>{users.firstName}</td>
                          </tr>
                        )

                    })}</tbody>
                </table>
              </CardBlock>
            </Card>
          </Col>
        </Row>
      </div>
   );
 }
}

export default Users;

У вас не определена переменная users. У вас есть только пользователи в вашем штате. Вместо этого попробуйте console.info(this.state.users).

DevK 16.03.2018 05:26

даже выполнение this.state.users там может не работать из-за асинхронного поведения setState

G_S 16.03.2018 05:29

Да, вероятно, он не появится сразу (массив все равно будет пустым). Но он не выдаст ошибку, и он должен получить правильные результаты при использовании его для рендеринга.

DevK 16.03.2018 05:34

Я пробовал использовать this.state.users, но он по-прежнему вызывает ту же ошибку ... Не могли бы вы помочь?

Esco 16.03.2018 05:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
518
1

Ответы 1

Вы получаете эту ошибку, потому что users не определен в области действия вашей функции обратного вызова (в Fetch). Замените console.info(users); на console.info(this.state.users);. Кроме того, вам придется изменить свой обратный вызов с обычной анонимной функции на функцию стрелки, иначе this не будет ссылаться на ваш класс, он будет ссылаться на функцию обратного вызова.

  componentDidMount(){
     fetch('http://some_ip_address/api/subuserlist',{
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'filterfield': 'group_id',
          'filtervalue': 'random_filter_value'
        }
     }).then(result=>result.json())
       .then((data) => {
          console.info(data);           //able to print data
          this.setState({
            users:data
          }, () => {
            console.info(this.state.users); // This will be fired after setState has completed.
          });
       })    
       .catch(function(error) {
         // If there is any error you will catch them here
       });   
  }

Я попробовал ваш метод, но он по-прежнему вызывает ту же ошибку. Любая помощь?

Esco 16.03.2018 05:43

Вы Конечно, вот где возникает ваша ошибка?

monners 16.03.2018 05:46

Эй, подождите, я не получаю ошибку, но не могу отобразить таблицу ... Какие-либо исправления в коде таблицы? Также я не могу распечатать какие-либо данные с помощью this.state.users

Esco 16.03.2018 05:53

Другие вопросы по теме