Question

我的JSX文件在从myjson.com访问时返回API数据;但是当我尝试从API的提供的URL 访问数据时，我收到“未处理的拒绝-SyntaxError-意外的JSON输入结束”错误。 提供的 URL，当放入Postman时，在提供Bearer Token时通过GET返回数据。

我的问题：我的JSX文件中是否必须实现相同的标记才能访问API的数据？如果是，那么在代码中如何实现？

这是我的代码（已修改）：

import React, { Component } from 'react';
import {render} from "react-dom";
import Navbar from '../components/Navbar.jsx';
import Footer from '../components/Footer.jsx';
import './MemberInfo.css';

class MemberInfo extends Component {

    state = { data: [] }

    componentWillMount(){
        fetch('http://myjson.com/api/e312j/', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-type': 'application/json',
                'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiR3JlZyIsInVuaXF1ZV9uYW1lIjoiZ2dyYWZmIiwibmJmIjoxNTI0ODM5Nzc1LCJleHAiOjE1MjQ5MjYxNzV9.xhvdfaWkLVZ_HLwYQuPet_2vlxNF7AoYgX-XRufiOj0'
            },
        }


        ) /*end fetch */
        .then(results => results.json()) 
        .then(data => this.setState({ data: data }))   
      }

    render() {
        console.log(this.state.data);
        return (
            <div>
                <Navbar />
                <div className="container">
                     <div className="clientContainer">
                            {
                                this.state.data.map( item =>( 
                                <div>
                                    {item.clientName}
                                </div>
                                ))
                            }
                        </div> 
            </div> 
            <Footer /> 
          </div>
        );
      }
}

export default MemberInfo;

在使用ReactJS获取API数据方面，我还是新手;我能得到一些帮助吗？

未处理的拒绝-SyntaxError- JSON输入的意外结束

0 个答案: