react component에서 promise객체 직접사용 에러

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에서 컴포넌트의 자식으로 프로미스(Promise) 객체를 직접 사용하려고 할 때 발생합니다. React는 컴포넌트를 렌더링할 때 자식으로 사용되는 요소들은 일반적으로 문자열, 숫자, 불리언, 다른 React 컴포넌트 등의 유효한 값이어야 합니다. 프로미스는 비동기 작업을 수행하고 완료될 때까지 대기하는 객체입니다. 하지만 React에서는 프로미스 객체를 직접 렌더링할 수 없으며, 프로미스의 결과를 받아서 렌더링해야 합니다. 즉, 프로미스를 해결(resolve)하여 결과 값을 사용해야 합니다.

이 에러를 해결하려면 프로미스를 해결하고 그 결과 값을 사용하는 로직을 추가해야 합니다. 일반적으로 React의 useState나 useEffect hook을 사용하여 프로미스를 해결하고 결과 값을 상태로 저장한 후, 해당 상태 값을 컴포넌트에서 렌더링하면 됩니다.

 

코드 보기

문제

해당 react 컴포넌트에 async를 선언하여서 react의 정책을 위반하여 에러가 발생하였습니다.

const FilterEvent = async () => {
  const filteredItems = await getFilteredEvents();
  return (
    <>
      <Itemlist items={filteredItems} />
    </>
  );
};

 

해결

promise객체를 상위 컴포넌트가 아닌 useEffect안에서 선언하여 문제를 해결하였습니다.

const FilterEvent = ({) => {
  const [filteredItems, setFilteredItems] = useState([]);
  useEffect(() => {
    const fetchDate = async () => {
      const getfilteredItems = await getFilteredEvents();
      setFilteredItems(getfilteredItems);
    };
    fetchDate();
  }, [ ]);
  return (
    <>
      <Itemlist items={filteredItems} />
    </>
  );
};