reactjs - 单击提交按钮时反应显示错误

Question

我是 React 的新手。我不明白为什么它显示错误。我需要重复数组对象，但是当它到达最后一个数组时，它不会重新启动。
https://codesandbox.io/s/generate-quote-xpu1q

index.js：

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

应用程序.js：

import React, { useState, useEffect } from "react";
import "./styles.css";
// import { qutoes } from "./Fetch";

export default function App() {
  // const data = qutoes;
  const [data, setData] = useState("loading");
  const [index, setIndex] = useState(0);

  const qutoesBtn = () => {
    if (index === data.length - 1) {
      setIndex(0);
    } else {
      setIndex(index + 1);
    }
  };
  useEffect(() => {
    fetch("https://type.fit/api/quotes")
      .then(res => res.json())
      .then(res2 => {
        console.log(res2.slice(0, 10));
        const lists = res2.slice(0, 10);
        setData(lists);
      });
  }, []);
  return (
    <div className="App">
      <h1>Generate Quote</h1>
      <h4>
        {data === "loading" ? (
          "loading...!!"
        ) : (
          <div>
            My qutoes is ---- <br />
            <span> {data[index].text}</span> <br /> Author is --
            {data[index].author}
          </div>
        )}
      </h4>

      <button onClick={qutoesBtn}>Generate Quote</button>
    </div>
  );
}

标签： reactjs

Answer 1

一旦索引达到，您应该更改条件以更新data.length - 1

if (index === (data.length - 1)) {
  setIndex(0);
}

请记住，给定数组[1, 2, 3]的长度为3，但最大索引是2因为数组索引从 开始0，因此当索引等于 data.length 时，React 将尝试访问该位置，从而给您遇到错误。