Компонент React не может получить данные из API
Это мой userinfo.js, который извлекает данные из app.js, которые должны отображаться здесь.
import React, { Component } from 'react';
import axios from 'axios';
class UserInfo extends Component {
constructor() {
super();
this.state = {
error: null,
isLoaded: false,
persons: []
};
}
componentDidMount() {
fetch("http://localhost:5000/api/userinfo")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
persons: result
});
})
.catch(
(error) => {
this.setState({
isLoaded: true,
error: error
});
});
}
render(){
const { error, isLoaded, persons } = this.state;
if (error) {
return <div>Error: {error}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return(
<div>
<h1>profile</h1>
<h1>{ this.state.persons.map(person => <li key = {this.state.persons.id}>{person.firstName}</li>)}</h1>
</div>
);
}
}
}
export default UserInfo;
И API (app.js на сервере узла):
app.get('/oauth/linkedin', function(req, res) {
// This will ask for permisssions etc and redirect to callback url.
Linkedin.auth.authorize(res, scope);
});
app.get('/profile/signin-linkedin',function(req,res){
Linkedin.auth.getAccessToken(res, req.query.code, req.query.state, function(err, results) {
if ( err )
return console.error(err);
console.info(results);
request({url:'https://api.linkedin.com/v1/people/~?format=json&oauth2_access_token='+results.access_token},function(error,response, body){
if (!error && response.statusCode == 200) {
console.info('hurray');
//console.info(response);
console.info('body is :'+body);
info = JSON.parse(body);
info1[0] = info;
console.info(info1);
console.info(info.firstName);
fN = info.firstName;
lN = info.lastName;
id = info.id;
res.redirect('http://localhost:3000/userinfo');
}
else{
console.info(body);
}
})
});
});
app.get('/api/userinfo',function(req,res){
console.info('hii');
res.setHeader('Content-Type', 'application/json');
res.send(info1);
});
app.listen(5000,process.env.IP);Я получаю следующую ошибку: Объекты недопустимы как дочерние объекты React (обнаружено: TypeError: не удалось получить). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив. Несмотря на то, что я передаю массив из app.js, я получаю сообщение об ошибке. Может кто-нибудь подскажет, как это решить ??
Мне не очень понятно, что вы здесь пытаетесь сделать, но я заметил одну вещь: судя по опубликованному вами коду, info1, похоже, нигде не объявлен.
Я опубликовал только сегмент кода, связанный с ошибкой, но я объявил info1 в моем исходном коде как var info1 = []
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема в том, что вы сохраняете объект ошибки для состояния и визуализируете его как дочерний элемент реакции (объекты недопустимы как дочерние элементы). Происходит то, что ваш .catch((error) => ... возвращается как объект ошибки, а не как строка. Итак, когда вы используете setState, вы устанавливаете свой this.state.error на объект ошибки. Итак, в вашем рендере вы делаете if (error) { return <div>Error: {error}</div>; }, но ошибка, на которую вы ссылаетесь, является объектом, а не строкой, которая является недопустимым дочерним элементом реакции. В заключение, вы должны вместо этого сохранить сообщение об ошибке в состоянии.
.catch(
(error) => {
this.setState({
isLoaded: true,
error: error.message // error.message is a string
});
});
Что касается ошибки при загрузке. Используйте Postman или что-то подобное, чтобы отладить, почему вы получаете ошибку с вашего сервера в первую очередь.
Можете ли вы проверить, какое значение имеет
personsпосле вызова API. Это некоторая информация1 в соответствии с вашим кодом, которая, я думаю, не является массивом.