Wlsepf
120
2022-04-11 17:23:22
3
136

react / js fetch 관련해서 여쭤볼게 있습니다.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>
    <script type="text/babel">
        const rootElement = document.getElementById('root');



        const App = () => {

            const [data, setData] = React.useState(null);

            React.useEffect(()=> {
                fetch('https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json')
                    .then(function(response) {
                        return response.json();
                    })
                    .then(function(myJson) {
                        // console.log(JSON.stringify(myJson));
                        console.log(myJson.data);
                        setData(myJson.data);
                    });

                    if (data == null) {
                        return <p>Loading..</p>
                    }
            }),[];
            return (
                <div>
                    <p>People</p>
                    <p>{JSON.stringify(data, null, 2)}</p>
                    {data.people.map(person => <p>{person.name}</p>)}
                </div>
            );
        };

        ReactDOM.render(<App/>, rootElement);
    </script>

</body>
</html>

위에 있는 것처럼 코드를 만들었는데 

 {data.people.map(person => <p>{person.name}</p>)} 부분에서 계속 오류가 납니다.

강의영상을 계속 돌려봐도 중간에 갑자기 다른부분으로 넘어가서요...



react-dom.development.js:23305 Uncaught TypeError: Cannot read properties of null (reading 'people')

    at App (<anonymous>:36:192)

    at renderWithHooks (react-dom.development.js:15015:20)

    at mountIndeterminateComponent (react-dom.development.js:17841:15)

    at beginWork (react-dom.development.js:19079:18)

    at HTMLUnknownElement.callCallback (react-dom.development.js:3942:16)

    at Object.invokeGuardedCallbackDev (react-dom.development.js:3991:18)

    at invokeGuardedCallback (react-dom.development.js:4053:33)

    at beginWork$1 (react-dom.development.js:23994:9)

    at performUnitOfWork (react-dom.development.js:22809:14)

    at workLoopSync (react-dom.development.js:22737:7)

0
  • 답변 3

  • 퀘이사123
    1k
    2022-04-11 17:26:29

    data 의 초기값을 null로 설정해서 그렇습니다.


  • Wlsepf
    120
    2022-04-11 17:35:15

    setData(myJson.data); 로 json에 있는 data을 넣어줘서 null 인거는 상관이 없는거 아닌가여..?

  • 퀘이사123
    1k
    2022-04-11 17:41:32

    useEffect는 최초 렌더링 직후 실행되는 함수입니다.


    최초 렌더링시 data는 null이기 때문에 오류가 납니다.


    메세지 또한 Cannot read properties of null (reading 'people') 라고 친절히 가르쳐주고있고요.


    게다가 fetch는 비동기 함수입니다.


    브라우저는 fetch를 기다렸다가 렌더링되지 않습니다.

  • 로그인을 하시면 답변을 등록할 수 있습니다.