Estoy tratando de agregar un efecto de carga usando React hook (useEffect) en mi página web, pero no sé por qué no funciona, mire..................
este es el componente de la aplicación ...............
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;archivo de datos..........
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 questionsMostrar error es como.............
No capturado (en promesa) SyntaxError: JSON.parse: carácter inesperado en la línea 1, columna 1 de los datos JSON
Si no está realizando una llamada API, no necesita usar fetch . Puede mapear los datos de inmediato.