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

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.

CodePudding user response：

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([])

CodePudding user response：

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(...)