不能在 React 函数中使用钩子

Question

我在使用useEffect钩子时遇到了invalid hook call error。文档仅指定此问题是由于版本不匹配或我的函数调用不正确而发生的。

任何人都可以检查我犯了哪个部分的错误吗？

import React, { useState, useEffect } from "react";
import "antd/dist/antd.css";
import { Typography, Card, Avatar, Row, Col, Tooltip } from "antd";
import {
UserOutlined,
BookOutlined,
LogoutOutlined,
SettingOutlined
} from "@ant-design/icons";
const { Text } = Typography;
export default function ProfileCard() {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
useEffect(() => {
fetch("/accounts/api/" + username)
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result.items);
},
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, [])
return (
<>
<Card
size="small"
style={{ width: 300 }}
actions={[...]}
>
<Row justify="center" style={{ marginBottom: -3 }}>
<Col>
<Text strong style={{ fontSize: 17 }}>
{ items.username }
</Text>
</Col>
</Row>
</Card>
</>
);
}

假设所有依赖项都已安装，并且username是预定义的字符串。

真诚地

CPY24

Answer 1

IIRC 你必须在 useEffect 中声明函数

useEffect(() => {
const fetchData = async () => {
try {
let response = await fetch(`/accounts/api/${username}`);
let result = await response.json();
setIsLoaded(true);
setItems(result.items);
} catch(err) {
console.error(err);
setIsLoaded(true);
setItems(err);
}
};
fetchData();
}, []);

Answer 2

useEffect(() => {
fetch("/accounts/api/" + username)
.then(res => res.json())
.then((result) => {
setIsLoaded(true);
setItems(result.items);
})
.catch((error) => {
setIsLoaded(true);
setError(error);
});
}, []);

对错误使用catch。

Answer 3

尝试按照注释中的建议使用 useCallback 钩子包装获取

const fetchData = useCallback(() => {
fetch("/accounts/api/" + username)
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result.items);
},
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, [])
useEffect(() => {
fetchData()
}, [fetchData])

Answer 4

react 和 react-dom 的版本是什么？(我不能评论(

Answer 5

我非常感谢那些试图回答我问题的人。事实证明，我将这个组件加载到另一个组件中，这违反了规则。对所有试图在此过程中提供帮助的人投了赞成票。