对 axios 检索到的数据的无效钩子调用答案

【问题标题】：invalid hook call on data retrieved by axios对 axios 检索到的数据的无效钩子调用
【发布时间】：2021-02-23 20:36:54
【问题描述】：

我正在尝试从 here 检索 JSON 数据，然后更新功能组件中的状态。尽管代码看起来不错，但我收到一个错误，说它是无效的钩子调用。

在 react 文档中，它说我可能在同一个文件夹中有 2 个不同的 react 应用程序，但是我用他们给出的命令检查了它，只有 1 个。但是我从 django 服务器运行它并且有一个不同的在不同的 django 应用程序中反应应用程序（因此在完全不同的文件夹中）。

const App = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    let url = "https://jsonplaceholder.typicode.com/posts";
    axios.get(url).then(res => {
      console.log(res.data);
      // The code crashes here saying that it is an invalid hook call
      useState(res.data);
    }).catch(err => console.log(err));
  }, []);

  return (
    <div>
      This is just a place holder.
    </div>
  );
}

我觉得这可能与 django 项目中的其他 react 应用程序有关，但如果有人能看到我看不到的东西，我将不胜感激。

编辑我意识到我试图在 useEffect 挂钩中调用 useState()，而我本应该使用函数中已经定义的 setPosts 函数。

【问题讨论】：

标签： javascript reactjs django

【解决方案1】：

  // The code crashes here saying that it is an invalid hook call

它在那里崩溃是因为您没有正确使用状态挂钩。您应该调用setPosts 而不是useState。见docs。

【讨论】：

哦，天哪，这是一个愚蠢的错误，这是漫长的一天xD