CODEWITHSUNDEEP
javascriptreactjsreact-hooksweb-applicationsaxios
Aatu Tahkola
Aatu Tahkola

Reputation: 35

Why won't the useEffect hook run and fetch data?

I am creating this simple news app with dotnet webapi and react. I want to fetch the news from my backend. The API is working fine, I have tested it, but somehow my useEffect won't run and I can't fetch the data. What am I doing wrong and what is the proper way of doing this? Any help will be appreciated!

Here's my app.js where the fetching should be working.

import './App.css';
import axios from 'axios';
import ArticleList from './/components/ArticleList.jsx';

function App() {
  const [articles, setArticles] = useState(null)

  useEffect(() => {
    console.log('If it works, this should be shown!')
    axios.get('https://localhost:7112/News').then(response => {
      setArticles(response.data)
      console.log(articles)
    });
  },[]);


  return (
    <div className="App">
      <ArticleList articles={articles}/>
    </div>
  );
}

export default App;

import ArticleListItem from './ArticleListItem.jsx'

export default function ArticleList(articles) {
    
    return (
        <>
            {articles && articles.map(article => (<ArticleListItem key={article.title} article={article} />
        ))}
        </>
    )
}

There's the component which throws error: articles.map is not a function.

Upvotes: 1

Views: 1049

Answers (3)

Anmol Arora
Anmol Arora

Reputation: 11

In my case, I was using webstorm and for some reason it was not printing the useEffect console logs in my webstorm terminal, when I checked the logs in the browser console everything was getting printed in the logs

Upvotes: 0

monim
monim

Reputation: 4383

The error does not come from useEffect neither tha App component . But ArticleList it self when you pass articles as a props to ArticleList component and before mapping it you have to check if you have articles first : You can do something like this :

{props.articles && props.articles.map(...)

Upvotes: 1

EST-TQ
EST-TQ

Reputation: 34

You need to check articles to render Loading or ArticleList

{articles && <ArticleList articles={articles}/>}

or you set initial value for articles state:

const [articles, setArticles] = useState([])

Upvotes: 0

Related Questions