Question

我有一个react组件，可以调用rest api，并且在服务器站点上可以正常工作。

但是在执行请求之后在客户端，我会收到此错误在.catch

完整错误是： SyntaxError：http://localhost:3000/static/js/0.chunk.js:974:41

处的JSON输入↵意外结束

，完整代码为：

import React, { Component } from 'react';
import { Input, Upload , Icon, message} from 'antd';
import Form from '../../components/uielements/form';
import Button from '../../components/uielements/button';
import Notification from '../../components/notification';
import { adalApiFetch } from '../../adalConfig';

const FormItem = Form.Item;

class RegisterTenantForm extends Component {
    constructor(props) {
        super(props);
        this.state = {TenantDomainUrl:'',ApplicationId:'', SiteCollectionTestUrl:'',CertificatePassword: '', confirmDirty: false, loading: false, buttondisabled: true};
        this.handleChangeTenantDomainUrl = this.handleChangeTenantDomainUrl.bind(this);
        this.handleChangeSiteCollectionTestUrl = this.handleChangeSiteCollectionTestUrl.bind(this);     
        this.handleChangeCertificatePassword = this.handleChangeCertificatePassword.bind(this);
        this.handleChangeApplicationId= this.handleChangeApplicationId.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleApplicationIdValidation = this.handleApplicationIdValidation.bind(this); 
        this.handleTenantDomainUrlValidation = this.handleTenantDomainUrlValidation.bind(this); 
        this.handleSiteCollectionTestUrlValidation = this.handleSiteCollectionTestUrlValidation.bind(this); 
        this.handleCustomRequest = this.handleCustomRequest.bind(this); 

    };

    handleChangeTenantDomainUrl(event){
        this.setState({TenantDomainUrl: event.target.value});
    }

    handleChangeSiteCollectionTestUrl(event){
        this.setState({SiteCollectionTestUrl: event.target.value});
    }

    handleChangeCertificatePassword(event){
        this.setState({CertificatePassword: event.target.value});
    }

    handleChangeApplicationId(event){
        this.setState({ApplicationId: event.target.value});
    }

    beforeUpload(file) {
        const isPFX = file.type === 'application/x-pkcs12';
        if (!isPFX) {
          message.error('You can only upload PFX file!');
        }
    }

    handleCustomRequest(file, onSuccess){
        this.setState({ 'selectedFile': file });
    }

    handleApplicationIdValidation(rule, value, callback){
        const form = this.props.form;
        const str = form.getFieldValue('applicationid');
        var re = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
        if (str && !str.match(re)) {
            callback('Tenant id is not correctly formated id');            
        } 
        else {
            callback();
        }
    }

    handleTenantDomainUrlValidation(rule, value, callback){
        const form = this.props.form;
        const str = form.getFieldValue('tenantdomainurl');        
        var re = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/i;
        if (str && !str.match(re)) {
            callback('Tenant Domain Url is not correctly formated.');
        } 
        else {
            callback();
        }
    }

    handleSiteCollectionTestUrlValidation(rule, value, callback){
        const form = this.props.form;
        const str = form.getFieldValue('sitecollectiontesturl');        
        var re = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/i;
        if (str && !str.match(re)) {
            callback('Site collection test url is not correctly formated.');
        } 
        else {
            callback();
        }
    }



    handleSubmit(e){
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                let data = new FormData();
                //Append files to form data
                data.append("model", JSON.stringify({"TenantDomainUrl": this.state.TenantDomainUrl,
                 "ApplicationId": this.state.ApplicationId, 
                 "SiteCollectionTestUrl": this.state.SiteCollectionTestUrl,
                 "CertificatePassword": this.state.CertificatePassword 
                }));

                let file = this.state.selectedFile;
                data.append("file", file, file.file.name);

                const options = {
                  method: 'put',
                  body: data,
                  config: {
                    headers: {
                      'Content-Type': 'multipart/form-data'
                    }
                  }
                };

                adalApiFetch(fetch, "/Tenant", options)
                  .then(response => response.json())
                  .then(responseJson => {
                    if (!this.isCancelled) {
                      this.setState({ data: responseJson });
                      Notification(
                        'success',
                        'Tenant created',
                        JSON.stringify(values)
                        );
                    }
                  })
                  .catch(error => {
                    console.error(error);
                });
            }
        });      
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 6 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 14 },
        },
        };
        const tailFormItemLayout = {
        wrapperCol: {
            xs: {
            span: 24,
            offset: 0,
            },
            sm: {
            span: 14,
            offset: 6,
            },
        },
        };
        return (
            <Form onSubmit={this.handleSubmit}>
                <FormItem {...formItemLayout} label="Application Id" hasFeedback>
                {getFieldDecorator('applicationid', {
                    rules: [
                    {
                        required: true,
                        message: 'Please input your application id',
                    },
                    {
                        validator: this.handleApplicationIdValidation
                    }],
                })(<Input name="applicationid" id="applicationid" onChange={this.handleChangeApplicationId}/>)}
                </FormItem>
                <FormItem {...formItemLayout} label="Certificate Password" hasFeedback>
                {getFieldDecorator('certificatepassword', {
                    rules: [
                    {
                        required: true,
                        message: 'Please input your password!',
                    }
                    ],
                })(<Input type="password" name="certificatepassword" id="certificatepassword" onChange={this.handleChangeCertificatePassword}/>)}
                </FormItem>
                <FormItem {...formItemLayout} label="Tenant Domain Url" hasFeedback>
                {getFieldDecorator('tenantdomainurl', {
                    rules: [
                    {
                        required: true,
                        message: 'Please input your tenant domain url!',
                    },
                    {
                        validator: this.handleTenantDomainUrlValidation
                    }],
                })(<Input name="tenantdomainurl" id="tenantdomainurl"  onChange={this.handleChangeTenantDomainUrl} />)}
                </FormItem>
                <FormItem {...formItemLayout} label="Site Collection Test Url" hasFeedback>
                {getFieldDecorator('sitecollectiontesturl', {
                    rules: [
                    {
                        required: true,
                        message: 'Please input your site collection test url!',
                    },
                    {
                        validator: this.handleSiteCollectionTestUrlValidation
                    }],
                })(<Input name="sitecollectiontesturl" id="sitecollectiontesturl"  onChange={this.handleChangeSiteCollectionTestUrl} />)}
                </FormItem>
                <FormItem {...formItemLayout} label="Certificate File">
                    <Upload  beforeUpload={this.beforeUpload} customRequest={this.handleCustomRequest}>
                        <Button >
                            <Icon type="upload" /> Click to Upload
                        </Button>
                    </Upload>

                </FormItem>
                <FormItem {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">
                        Register tenant
                    </Button>
                </FormItem>
            </Form>
        );
    }
}

const WrappedRegisterTenantForm = Form.create()(RegisterTenantForm);
export default WrappedRegisterTenantForm;

Answer 1

可能是您的错误不是JSON。

使用支票

if(response.status === 200){
   return response.json()
}else{
   throw "error"
}

SyntaxError：http：// localhost：3000 / static / js / 0.chunk.js：974：41的JSON输入↵意外结束

1 个答案: