为什么 useEffect 挂钩不会运行并获取数据？答案

【问题标题】：Why won't the useEffect hook run and fetch data?为什么 useEffect 挂钩不会运行并获取数据？
【发布时间】：2022-10-09 02:43:43
【问题描述】：

我正在使用 dotnet 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 不是一个函数。

【问题讨论】：

它应该是import ArticleList from './components/ArticleList.jsx'; 一个斜线而不是import ArticleList from './/components/ArticleList.jsx'; 两个斜线。
它对我的实际问题没有帮助，useEffect 仍然没有运行，但感谢您指出！
控制台中是否显示错误或其他内容？
你导入了吗：import {useEffect} from 'react'
哦，是的@monim 它没有复制它，但我有进口权！

标签： javascript reactjs react-hooks web-applications axios

【解决方案1】：

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

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

【讨论】：

如果你不明白我的意思加你文章列表我会向你解释
在原始问题中添加了 ArticleList 代码。我该如何解决？ @monim
好的，解决了这个问题，接下来发生了。在stackoverflow.com/questions/73882210/… 上查看我的新问题。一个新问题对象无效，因为在我将道具传递到的组件中发生了 React 子项。十分感谢！
好的，我会看到的

【解决方案2】：

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

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

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

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

【讨论】：

感谢您的回答，但它仍然无法正常工作。问题是加载站点时 useEffect 挂钩未运行。 console.log("If it works, this should show up!") 不会出现在控制台中。我还检查了我的 API，它会判断它是否收到了请求。

【解决方案3】：

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

【讨论】：