Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

에러 내용

---

Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

react에서 async, awiat, promise, then 등의 비동기를 활용해 새로운 요소를 만들고 렌더링 하자 위와 같은 에러를 만났습니다.

 

아래는 에러 코드 예시입니다.

const component = ({list}) => {
	return <div>
	{list.map(async()=>{
		await ...
		return <ul></ul>
	})}
	</div>
}

 

에러 원인

---

에러 원인은 비동기(Promise)가 아직 처리되지 않았을 때 처리되지 않은 Promise를 HTML element로 표현할 수 없기 때문에 위와 같은 오류가 발생합니다.

(즉 단순한 promise의 배열 일 때, promise를 하나의 HTML 요소로 치환할 수 없기 때문입니다.) 

해결 방법

---

렌더링 할 때 처리되지 않은 Promise 배열을 넘겨주지 말고, 모든 Promise 처리가 끝난 후에 넘겨주면 됩니다.

useEffect(), useState()와 Promise.all() 등을 활용하여 구현할 수 있습니다.

 

아래는 해결된 코드 예시입니다.

const component = ({list}) => {
	const [uls,setUls] = useState([]);
	useEffect(()=>{
		Promise.all(
			list.map(async()=>{
				await ...
				return <ul></ul>
			})
		).then(values=>setUls(values))
	},[])
	return <div>
	{uls}
	</div>
}

Promise 처리가 아직 다 끝나지 않았을 때는 빈배열을 렌더링 하고, 모든 Promise의 처리가 끝나면 setUls로 uls를 업데이트하여 원하는 결과를 렌더링 합니다. 

 

참고 자료

---

 

Promise.all() - JavaScript | MDN