首页 > 解决方案 > 未处理的拒绝 -SyntaxError - JSON 输入的意外结束

问题描述

从 myjson.com 访问时,我的 JSX 文件返回 API 数据;但是当我尝试从为 API提供的 URL访问数据时,我收到“未处理的拒绝 -SyntaxError- JSON 输入的意外结束”错误。 提供的URL 在放入 Postman 时,会在提供承载令牌时通过 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 数据方面,我还是个新手;请问我能得到一些帮助吗?

标签: reactjsapifetch

解决方案


推荐阅读