Я новичок в 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;
даже выполнение this.state.users там может не работать из-за асинхронного поведения setState
Да, вероятно, он не появится сразу (массив все равно будет пустым). Но он не выдаст ошибку, и он должен получить правильные результаты при использовании его для рендеринга.
Я пробовал использовать this.state.users, но он по-прежнему вызывает ту же ошибку ... Не могли бы вы помочь?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы получаете эту ошибку, потому что 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
});
}
Я попробовал ваш метод, но он по-прежнему вызывает ту же ошибку. Любая помощь?
Вы Конечно, вот где возникает ваша ошибка?
Эй, подождите, я не получаю ошибку, но не могу отобразить таблицу ... Какие-либо исправления в коде таблицы? Также я не могу распечатать какие-либо данные с помощью this.state.users
У вас не определена переменная
users. У вас есть только пользователи в вашем штате. Вместо этого попробуйтеconsole.info(this.state.users).