时间戳

首页 > 解决方案 > 对 axios 检索到的数据的无效钩子调用

javascript - 对 axios 检索到的数据的无效钩子调用

问题描述

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

在 react 文档中，它说我可能在同一个文件夹中有 2 个不同的 react 应用程序，但是我用他们给出的命令检查了它，只有 1 个。但是我从 django 服务器运行它，并且有一个不同的 react 应用程序一个不同的 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 项目中的其他反应应用程序有关，但如果有人能看到我看不到的东西，我将不胜感激。

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

标签： javascriptreactjsdjango

解决方案

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

它在那里崩溃是因为您没有正确使用状态挂钩。你应该打电话setPosts而不是useState. 请参阅文档。

推荐阅读