Uncaught SyntaxError: Unexpected token '<' react gatsby webapp答案

【问题标题】：Uncaught SyntaxError: Unexpected token '<' react gatsby webappUncaught SyntaxError: Unexpected token '<' react gatsby webapp
【发布时间】：2020-09-04 06:58:53
【问题描述】：

React Gatsby 网络应用：未捕获 SyntaxError: Unexpected token '

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

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>
    )
  }
}

【问题讨论】：

我怀疑任何人都能够运行此代码，因为它显然取决于复杂的 prop 值 (courses) 以及源代码不存在的外部模块。我建议挖空这个组件，并将道具记录为字符串，以确认输入值正是您所期望的。

标签： javascript reactjs gatsby

【解决方案1】：

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

当请求错误时经常会导致这种情况：拼写错误的路径组件或不受支持的方法。一些 HTTP 服务器框架默认配置为为不匹配的路由返回一个非常基本的 HTML 错误页面。

因此，如果您的 fetch 中有拼写错误，并且目标服务器使用默认的不匹配路由响应，但您的代码假定响应为 JSON，您将得到这个确切的错误。

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

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

【讨论】：

我已经在字符串中记录了道具，但道具没有滞后。我也为 npm 完成了缓存清除，但它仍然存在。你还有其他解决方案吗？谢谢先生，您的快速响应，但我仍然无法解决此错误