使用 react hooks 加载效果

Question

我正在尝试在我的网页上使用 React hook(useEffect) 添加加载效果，但我不知道为什么它不起作用，看看...... ...

this is the App componant......................

import "./App.css";
import React, { useState, useEffect } from "react";
import data from "./data";
import Loading from './Loading'
import SingleQuestion from "./Question";

function App() {
  const [questions, setQuestions] = useState(data);
  const [loading, setLoading] = useState(true);
  const fetchData = async() => {
      const respons = await fetch(data)
      const newData = await respons.json();
      setQuestions(newData)
      setLoading(false)
  }
  useEffect(() =>{
    fetchData();
  },[]);

  if(loading){
    return(
      <main>
        <Loading />
      </main>
    )
  }
  return (
    <main>
      <div className="container">
        <h3>question and answers about login</h3>
        <section className="info">
          {questions.map((question) => {
            return (
              <SingleQuestion key={question.id} {...question}></SingleQuestion>
            );
          })}
        </section>
      </div>
    </main>
  );
}

export default App;

data file..........

const questions = [
    {
      id: 1,
      title: 'Do I have to allow the use of cookies?',
      info:
        'Unicorn vinyl poutine brooklyn, next level direct trade iceland. Shaman copper mug church-key coloring book, whatever poutine normcore fixie cred kickstarter post-ironic street art.',
    },
    {
      id: 2,
      title: 'How do I change my My Page password?',
      info:
        'Coloring book forage photo booth gentrify lumbersexual. Migas chillwave poutine synth shoreditch, enamel pin thundercats fashion axe roof party polaroid chartreuse.',
    },
    {
      id: 3,
      title: 'What is BankID?',
      info:
        'Enamel pin fam sustainable woke whatever venmo. Authentic asymmetrical put a bird on it, lumbersexual activated charcoal kinfolk banjo cred pickled sartorial.',
    },
    {
      id: 4,
      title: 'Whose birth number can I use?',
      info:
        'Edison bulb direct trade gentrify beard lo-fi seitan sustainable roof party franzen occupy squid. Knausgaard cronut succulents, scenester readymade shabby chic lyft. Copper mug meh vegan gentrify.',
    },
    {
      id: 5,
      title: 'When do I recieve a password ordered by letter?',
      info:
        'Locavore franzen fashion axe live-edge neutra irony synth af tilde shabby chic man braid chillwave waistcoat copper mug messenger bag. Banjo snackwave blog, microdosing thundercats migas vaporware viral lo-fi seitan ',
    },
  ]
  export default questions

显示错误就像......

Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Answer 1

如果您不进行 api 调用，则不需要使用 fetch。您可以立即映射数据。

使用 react hooks 加载效果

Loading effect using react hookss

javascript

reactjs

html5-canvas