时间戳

首页 > 解决方案 > SyntaxError Unexpected token < in JSON at react.js API 导航中的位置 0

javascript - SyntaxError Unexpected token < in JSON at react.js API 导航中的位置 0

问题描述

rnmservice.js

export function getrnm({ url }) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        resolve(data);
      });
  });
}

export async function getAllrnm(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        resolve(data);
      });
  });
}

应用程序.js

import React, { useState, useEffect } from "react";
import Navbar from "./components/Navbar";
import Card from "./components/Card/Card";
import { getrnm, getAllrnm } from "./services/rmservice";
function App() {
  const [rnmData, setRnmData] = useState([]);
  const [nextUrl, setNextUrl] = useState("");
  const [prevUrl, setPrevUrl] = useState("");
  const [loading, setLoading] = useState(true);
  const initialURL = "https://rickandmortyapi.com/api/episode/";

  useEffect(() => {
    async function fetchData() {
      let response = await getAllrnm(initialURL);
      setNextUrl(response.next);
      setPrevUrl(response.previous);
      await loadRnm(response.results);
      setLoading(false);
    }
    fetchData();
  }, []);

  const next = async () => {
    setLoading(true);
    let data = await getAllrnm(nextUrl);
    await loadRnm(data.results);
    setNextUrl(data.next);
    setPrevUrl(data.previous);
    setLoading(false);
  };

  const prev = async () => {
    if (!prevUrl) return;
    setLoading(true);
    let data = await getAllrnm(prevUrl);
    await loadRnm(data.results);
    setNextUrl(data.next);
    setPrevUrl(data.previous);
    setLoading(false);
  };

  const loadRnm = async data => {
    let _rnmData = await Promise.all(
      data.map(async rnm => {
        let rnmRecord = await getrnm(rnm);
        return rnmRecord;
      })
    );
    setRnmData(_rnmData);
  };

  return (
    <>
      <Navbar />
      <div>
        {loading ? (
          <h1 style={{ textAlign: "center" }}>Loading...</h1>
        ) : (
          <>
            <div className="btn">
              <button onClick={prev}>Prev</button>
              <button onClick={next}>Next</button>
            </div>
            <div className="grid-container">
              {rnmData.map((rnm, i) => {
                return <Card key={i} ricmor={rnm} />;
              })}
            </div>
            <div className="btn">
              <button onClick={prev}>Prev</button>
              <button onClick={next}>Next</button>
            </div>
          </>
        )}
      </div>
    </>
  );
}

export default App;

这里我的沙盒链接是https://codesandbox.io/s/musing-thunder-frsk6。我正在尝试使用 ricky and morty ( https://rickandmortyapi.com/api/episode/ ) 的 API 获取数据并进行导航，但是当我单击下一步按钮时，我收到错误，因为“SyntaxError Unexpected token < in位置 0 的 JSON"

标签： javascriptreactjsapinavigation

解决方案

你只需useEffect用这个替换你的

useEffect(() => {
    async function fetchData() {
      let response = await getAllrnm(initialURL);
      console.log(response.info);
      setNextUrl(response.info.next);
      setPrevUrl(response.info.previous);
      setPages(response.info.pages);
      await loadRnm(response.results);
      setLoading(false);
    }
    fetchData();
  }, []);

您正在直接访问下一个和上一个。像这样访问response.info.next，因为所有下一个/上一个进入信息。

推荐阅读