How to render this array in array react js-CodePudding

Hi I want to show this advice from this api i have fetched all the data but when I try to show it it throws error and also I tried to map the data but nothing works it shows errors

import React, { useState, useEffect } from 'react';

export default function App() {
  const [advices, setAdvices] = useState([]);
  console.log(advices); // you should have the fetch data here

  async function fetchData() {
    try {
      const response = await fetch('https://api.adviceslip.com/advice');
      const data = await response.json();
      setAdvices(data.slip);
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() => {
    fetchData();
  }, []);

  return <></>;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

CodePudding user response：

import React, {
  useState,
  useEffect
} from 'react';

export default function App() {
  const [advices, setAdvices] = useState([]);
  //advices will always be null here as initiated with empty array
  console.log(advices); // you should have the fetch data here 

  async function fetchData() {
    try {
      const response = await fetch("http://jsonplaceholder.typicode.com/Posts");
      const data = await response.json();
      setAdvices(data);
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    console.log(advices);
  }, [advices]);

  return ( < > Test < />);
  }

CodePudding user response：

the initial value of advice should be an object and there was not another serious problem codesand box link

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

export default function App() {
  const [advices, setAdvices] = useState([]);
  console.log(advices); // you should have the fetch data here

  async function fetchData() {
    try {
      const response = await fetch("https://api.adviceslip.com/advice");
      const data = await response.json();
      setAdvices(data.slip);
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() => {
    fetchData();
  }, []);
  return (
    <div className="App">
      <h1>{advices.advice}</h1>
    </div>
  );
}