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

Question

我试图从这里检索JSON数据，然后在功能组件中更新状态。即使代码看起来很好，我得到一个错误，说这是一个无效的钩子调用。

在react文档中，它说我可能在同一个文件夹中有2个不同的react应用程序，但是我用他们给出的命令检查了它，只有1个。然而，我从django服务器上运行这个，在不同的django应用程序中有一个不同的react应用程序(所以在一个完全不同的文件夹中)。

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函数时。

Answer 1

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

它在那里崩溃，因为你没有正确使用状态钩子。你应该叫setPosts而不是useState。看到文档。