Cannot use Hook Inside React Function

Question

I faced an invalid hook call error when using the useEffect hook. The docs only specified that this problem occurred because of either a version mismatch or my function call is incorrect.

Can anyone please check which part did I made my mistake?

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>
    </>
  );
}

Please assume that all dependencies are installed and username is a predefined string.

Sincerely,

cpy24

Answer 1

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

use catch for Error.

Answer 2

Try wrapping the fetch with a useCallback hook as suggested in the comments

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 3

what are the versions of react and react-dom? (I cannot comment)

Answer 4

IIRC you have to declare the function inside the 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 5

I really appreciated those who tried to answer my question. It turned out that I loaded this component inside another and that's a violation of rules. Upvoted to all those that tried to help out along the way.