Question 198527 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Can't access fetched data in useEffect()

I’m creating a random quotes generator but there’s a problem. It just doesn’t generate a random quote at the beginning. Please correct me so that the generate random quote works at least one time when rendering

    const [quotes, setQuotes] = useState([]);
    const [randomQuote, setRandomQuote] = useState();

    useEffect(() => {
        async function fetchData() {
            await fetch(process.env.NEXT_PUBLIC_API_URL)
                .then(res => res.json())
                .then(data => setQuotes(data))
                .catch(err => console.error(err));
        }

        fetchData();
        console.log('from useEffect', quotes);
        generateRandomQuote();
    }, []);

    console.log('After useEffect(): ', quotes);

    const generateRandomQuote = () => {
        const randomIndex = Math.floor(Math.random() * quotes.length);
        const selectedQuote = quotes[randomIndex];
        setRandomQuote(selectedQuote);
    };
Tags:

3

Answers


  1. 0

    try this :

    const [quotes, setQuotes] = useState([]);
const [randomQuote, setRandomQuote] = useState();

useEffect(() => {
  async()=>{
    async function fetchData() {
        await fetch(process.env.NEXT_PUBLIC_API_URL)
            .then(res => res.json())
            .then(data => setQuotes(data))
            .catch(err => console.error(err));
    }

    await fetchData();
    console.log('from useEffect', quotes);
    generateRandomQuote();
  }
}, []);

console.log('After useEffect(): ', quotes);

const generateRandomQuote = () => {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    const selectedQuote = quotes[randomIndex];
    setRandomQuote(selectedQuote);
};
    Login or Signup to reply.
  2. 0

    You don’t have to define the function fetchData inside the useEffect() that’s kind of odd.
    Secondly the fetchData seems to be an async function but you are not awaiting it.

    await fetchData()

    or

    fetchData().then(()=>generateRandomQuote())
    Login or Signup to reply.
  3. 0

    Do not use then with async/await.
    use either one but not both at once.

    const [quotes, setQuotes] = useState([]); 
const [randomQuote, setRandomQuote] = useState(); 

useEffect(() => { 
   async()=>{ 
    await fetchData(); 
    console.log('from useEffect', quotes); 
    generateRandomQuote(); 
   } 
}, []);

async function fetchData() {
       const res = await fetch(process.env.NEXT_PUBLIC_API_URL);
       const data = await res.json();
       setQuotes(data);
    } 

console.log('After useEffect(): ', quotes); 

const generateRandomQuote = () => { const randomIndex = Math.floor(Math.random() * quotes.length); 
const selectedQuote = quotes[randomIndex]; setRandomQuote(selectedQuote); 
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search