javascript - React组件无法从api获取数据

Question

这是我的 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.log(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.log('hurray');
				//console.log(response);
				console.log('body is :'+body);
				info = JSON.parse(body);
				info1[0] = info;
				console.log(info1);
				console.log(info.firstName);
				fN = info.firstName;
				lN = info.lastName;
				id = info.id;
				res.redirect('http://localhost:3000/userinfo');
			}
			else{
				console.log(body);
			}
        })
    });
});

app.get('/api/userinfo',function(req,res){
	console.log('hii');
	res.setHeader('Content-Type', 'application/json');
	res.send(info1);
	
});


app.listen(5000,process.env.IP);

我收到以下错误:对象作为 React 子对象无效(发现:TypeError:无法获取)。如果您打算渲染子集合，请改用数组。尽管我从 app.js 传递一个数组，但我收到错误。谁能告诉我如何解决？

Answer 1

问题是您正在保存一个错误对象来声明并将其渲染为 react 子对象(对象作为子对象无效 react )。正在发生的事情是你的.catch((error) => ...作为错误对象而不是字符串返回。所以当你 setState您正在设置您的 this.state.error到一个错误对象。所以在你的渲染中你做 if (error) { return <div>Error: {error}</div>; }但您引用的错误是一个对象而不是字符串，它是无效的 react 子项。总之，您应该将错误消息保存到 state 中。

.catch(
  (error) => {
    this.setState({
    isLoaded: true,
    error: error.message // error.message is a string
  });
});

就抓取错误而言。使用 Postman 或类似的工具来调试为什么您首先从服务器收到错误。