未捕获（承诺中）错误：网络错误：位置 3 的 JSON 中的意外令牌 <

Question

我只是在学习反应阿波罗。我发现这个错误很难调试。当然，我搜索了多个博客文章、问答网站并尝试了其中的一些。没有人工作。实际上，我想将一个值传递给 GraphQL 方法 Mutation 中的参数（它的值是一个对象）。这是我的源代码

const client = new ApolloClient({
  uri: "www.example.com"
});

const ADD_PARTNER = gql`
    mutation LE($input: inputPartner!) { 
        le_addpartner(input: $input) {
            result {
                code
                message
                success
            }
            partnerID
        }
    }
`;

class AddTodo extends React.Component {
    state = {
        name: '',
        nameSlug: '',
        bankLogo: null,
        phoneNumber: '',
        companyProfile: '',
        metaDescription: '',
        metaTitle: '',
        formSchema: ''
    }

    handleValueChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    render () {
        return (
            <Mutation mutation={ADD_PARTNER}>
                {(le_addpartner, { data }) => (
                    <form
                        onSubmit={e => {
                            e.preventDefault();
                            le_addpartner({ 
                                variables: { 
                                        input: {...this.state}
                                } 
                            })
                        }}
                    >
                        <div className="form-group">
                            <label htmlFor="name">Name</label>
                            <input type="text" className="form-control" id="name" onChange={(e) => this.handleValueChange(e)} />
                        </div>
                        <div className="form-group">
                            <label htmlFor="nameSlug">Name Slug</label>
                            <input type="text" className="form-control" id="nameSlug" onChange={(e) => this.handleValueChange(e)} />
                        </div>
                        <div className="form-group">
                            <label htmlFor="bankLogo">Bank Logo</label>
                            <input type="text" className="form-control" id="bankLogo" onChange={(e) => this.handleValueChange(e)} />
                        </div>
                        <div className="form-group">
                            <label htmlFor="phoneNumber">Phone Number</label>
                            <input type="text" className="form-control" id="phoneNumber" onChange={(e) => this.handleValueChange(e)} />
                        </div>
                        <div className="form-group">
                            <label htmlFor="companyProfile">Company Profile</label>
                            <textarea className="form-control" id="companyProfile" rows="3" onChange={(e) => this.handleValueChange(e)}></textarea>
                        </div>
                        <div className="form-group">
                            <label htmlFor="metaDescription">Meta Description</label>
                            <textarea className="form-control" id="metaDescription" rows="3" onChange={(e) => this.handleValueChange(e)}></textarea>
                        </div>
                        <div className="form-group">
                            <label htmlFor="metaTitle">Meta Title</label>
                            <textarea className="form-control" id="metaTitle" rows="3" onChange={(e) => this.handleValueChange(e)}></textarea>
                        </div>
                        <div className="form-group">
                            <label htmlFor="formSchema">Form Schema</label>
                            <textarea className="form-control" id="formSchema" rows="4" onChange={(e) => this.handleValueChange(e)}></textarea>
                        </div>
                        <button type="submit" className="btn btn-primary">Add Partner</button>
                    </form>
                )}
            </Mutation>
        )
    }
}

const App = () => (
  <ApolloProvider client={client}>
    <div style={{ marginTop: '50px' }}>
      <h2>
          GraphQL Mutation Partner{' '}
          <span aria-labelledby='jsx-a11y/accessible-emoji' role='img'>????</span>
      </h2>
      <AddTodo />
    </div>
  </ApolloProvider>
);

我提交表单时遇到的错误是

[网络错误]: SyntaxError: Unexpected token

任何帮助将不胜感激：D

Answer 1

您需要为您承诺的突变捕获错误。所以在你的情况下：

le_addpartner({ 
    variables: { 
        input: {...this.state}
    } 
}).catch((res) => {
    const errors = res.graphQLErrors.map((error) => {
        return error.message;
    });
    this.setState({ errors });
});

Answer 2

使用 Chrome DevTools（存在其他浏览器）网络选项卡来确定来自服务器的实际响应；这应该会使错误更加清晰。

这样做：

1. 通过转到汉堡菜单“更多工具”、“开发者工具”打开 Chrome DevTools
2. 重新加载页面
3. 触发网络提取发生
4. 转到开发者工具的“网络”标签
5. 选择相关的网络请求（它应该在/接近底部；如果你愿意，你可以通过 XHR 过滤让它更明显）
6. 转到“响应”选项卡以查看服务器发送的内容（“预览”选项卡也很方便，因为它以更易读的方式格式化响应）

我猜服务器已经给你发回了一些 HTML，这不是 Apollo 所期望的 JSON。

如果这不能清楚地说明错误，请发布响应结果以向您的问题添加更多信息以帮助其他人回答。

祝你好运！