单击提交按钮时反应显示错误答案

【问题标题】：react shows error when submit button click单击提交按钮时反应显示错误
【发布时间】：2020-04-05 15:50:15
【问题描述】：

我是 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
);

app.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

【解决方案1】：

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

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

记住给定一个数组[1, 2, 3]，长度是3，但最大索引是2，因为数组索引从0开始，所以当索引等于data.length时React会尝试访问那个位置给你你遇到的错误。

【讨论】：

【解决方案2】：

这是因为您没有检查数组是否已到达按钮单击中的最后一项，因此，如果您没有在按钮单击中检查它，那么它甚至会在检查之前再次增加索引，所以将您的代码更改为：

const qutoesBtn = () => {
    if (index === data.length - 1) {
      setIndex(0);
    } else {
      setIndex(index + 1);
    }
  };

这里的-1指的是数组中的最后一项

【讨论】：

【解决方案3】：

我认为你需要一个条件，如果数组到达末尾然后从零开始

【讨论】：

【解决方案4】：

你想检查下一个项目是否超过长度并且你想在qutoesBtn里面检查它

 const qutoesBtn = () => {
    setIndex(index + 1);
    if (index + 1 >= data.length) {
      setIndex(0);
    }

    console.log(index);
  };

代码沙盒here

【讨论】：