未捕获的语法错误：意外的标记“<”反应 gatsby webapp

Question

**

React Gatsby Web 应用程序：未捕获的语法错误：意外的标记“<”

**

运行应用程序时出现此错误。 此页面有一个按钮事件处理程序。 看看下面给出的这段代码。

Coursecart.js 页面。

import React, { Component } from "react"
import Heading from "../Reuseable/Heading"
import Img from "gatsby-image"

const getCategory = items => {
  let holditems = items.map(items => {
    return items.node.category
  })
  let holdCategories = new Set(holditems)
  let categories = Array.from(holdCategories)
  categories = ["all", ...categories]
  return categories
}

export default class Coursecart extends Component {
  constructor(props) {
    super(props)
    this.state = {
      courses: props.courses.edges,
      mycourses: props.courses.edges,
      mycategories: getCategory(props.courses.edges),
    }
  }

  cateClicked = category => {
    let keepItsafe = [...this.state.courses]
    if (category === "all") {
      this.setState(() => {
        return { mycourses: keepItsafe }
      })
    } else {
      let holdMe = keepItsafe.filter(node => {
        return node.category === category
      })
      this.setState(() => {
        return { mycourses: holdMe }
      })
    }
  }

  render() {
    return (
      <section className="py-5">
        <div className="container">
          <Heading title="Courses" />
          <div className="row my-3">
            <div className="col-10 mx-auto text-center">
              {this.state.mycategories.map((category, index) => {
                return (
                  <button
                    type="button"
                    className="btn btn-info m-3 px-3"
                    key={index}
                    onClick={() => {
                      this.cateClicked(category)
                    }}
                  >
                    {category}
                  </button>
                )
              })}
            </div>
          </div>
          <div className="row">
            {this.state.mycourses.map(({ node }) => {
              return (
                <div
                  key={node.id}
                  className="col-11 col-md-6 d-flex my-3 mx-auto"
                >
                  <Img fixed={node.image.fixed} />
                  <div className="flex-grow-1 px-3">
                    <div className="d-flex">
                      <h6 className="mb-0">{node.title}</h6>
                      <h6 className="mb-0 text-success ml-3">$ {node.price}</h6>
                    </div>
                    <p className="text-muted">
                      <small>{node.description.description}</small>
                    </p>
                    <button
                      className="btn btn-warning snipcart-add-item"
                      data-item-id={node.id}
                      data-item-name={node.title}
                      data-item-price={node.price}
                      data-item-url="https://https://rgecom.netlify.app/"
                      data-item-image={node.image.fixed.src}
                    >
                      Join Now
                    </button>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </section>
    )
  }
}

Answer 1

这通常是由于尝试将 XHR 响应解析为 JSON，而正文实际上包含 HTML。

这通常是在请求错误时引起的：拼写错误的路径组件或不受支持的方法。 一些 HTTP 服务器框架默认配置为为不匹配的路由返回一个非常基本的 HTML 错误页面。

因此，如果您在 fetch 中有错字，并且目标服务器使用默认的 unmatched-route 响应，但您的代码假定响应将是 JSON，您将得到这个确切的错误。

尝试在你的 JS 控制台中运行这个片段，我敢打赌你会得到同样的错误：

JSON.parse('<!DOCTYPE html>')

未捕获的语法错误：意外的标记“<”反应 gatsby webapp

问题描述

1 个解决方案

解决方案1
0 2020-09-04 07:05:22

未捕获的语法错误：意外的标记“&lt;”反应 gatsby webapp

问题描述

1 个解决方案

解决方案1 0 2020-09-04 07:05:22

未捕获的语法错误：意外的标记“<”反应 gatsby webapp

解决方案1
0 2020-09-04 07:05:22