<!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)
