为什么 useEffect 挂钩不会运行和获取数据？

Question

我正在使用 do.net webapi 创建这个简单的新闻应用程序并做出反应。 我想从我的后端获取新闻。 API 工作正常，我已经对其进行了测试，但不知何故我的 useEffect 无法运行并且我无法获取数据。 我做错了什么，正确的做法是什么？ 任何帮助将不胜感激！

这是我的 app.js 应该可以进行提取的地方。

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} />
        ))}
        </>
    )
}

存在抛出错误的组件：articles.map 不是 function。

Answer 1

该错误既不是来自useEffect ，也不是来自App组件。 但是当你将articles作为props传递给 ArticleList 组件时， ArticleList是它自己，在映射它之前你必须先检查你是否有文章：你可以这样做：

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

Answer 2

您需要检查文章以呈现 Loading 或 ArticleList

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

或者您为文章 state 设置初始值：

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

Answer 3

就我而言，我使用的是 webstorm，由于某种原因它没有在我的 webstorm 终端中打印 useEffect 控制台日志，当我检查浏览器控制台中的日志时，所有内容都在日志中打印