인프런 커뮤니티 질문&답변

지니

작성한 질문수

프로젝트로 배우는 React.js

23 블로그 리스트 데이터 받아오기 (useEffect)

useState 사용 오류

작성

506

코드는 영상과 똑같이 작성하고 useState를 사용하니 컴파일은 성공했지만 브라우저에선 아래와 같은 오류가 발생하면서 흰 화면만 보입니다ㅠㅠ 해결할 수 있도록 도와주세요!

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

react redux es6

답변 1

코지 코더

지식공유자

useState를 컴포넌트 함수 안에서 사용하셔야 합니다. 컴포넌트 안으로 옮겨보시고 해보시겠어요? 그래도 안되면 코드를 복사해서 여기에 올려주세요^^

지니

질문자

작성했던 코드입니다...!

import { useState, useEffect } from "react";
import axios from "axios";

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

    const getPosts = () => {
        axios.get('http://localhost:3001/posts').then((res) => {
            setPosts(res.data);
        })
    };

    useEffect(() => {
        getPosts();
    }, []);

    return (
        <div>
            <h1>Blogs</h1>
            <h1>{posts}</h1>
        </div>
    );
};

export default ListPage;

코지 코더

지식공유자

에러가 이 파일이 아닌거 같은데 에러 메세지를 전체를 복사해서 여기 댓글에 달아주시겠어요?

깃헙에 전체 소스코드를 올려서 깃헙 링크를 남겨주시면 더 좋습니다

지니

작성한 질문수

전체 Q&A

질문하기