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子对象（对象作为子代无效）。发生的情况是您的Always next previous should have 7 days gap, without conflicting, and result should appear like below (maintaining 7 days gap on each click) <br/> <hr> please don't worry on calendar display as i have multiple select in my project, producing same here is not possible, thanks <p><input type="text" value="01/01/2018 - 07/01/2018"></p>作为错误对象而不是字符串返回。因此，当您.catch((error) => ...时，您会将setState设置为错误对象。因此，您在渲染中执行this.state.error，但是您所引用的错误是一个对象，而不是一个无效的react子代字符串。总之，您应该将错误消息保存为状态。

if (error) { return <div>Error: {error}</div>; }

至于获取错误。首先使用Postman或类似工具调试为什么从服务器接收到错误。

React组件无法从api获取数据

1 个答案: