[ReactNative] Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.

React-native로 앱 개발을 진행하던 중 아래와 같은 오류가 발생하였다.

Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a colllection of children, use an array instead.

 

오류가 발생한 소스코드

const Profile = async () => {
  const [images, setImages] = useState([]);

  const openPicker = async () => {
    try {

      const response = await MultipleImagePicker.openPicker({
        usedCameraButton: false,
        maxVideo: 1,
        selectedAssets: images,
        isExportThumbnail: true,
        isCrop: true,
        isCropCircle: true,
      });

      console.log('response: ', response);
      setImages(response);
      console.log('Images: ', images);

    } catch (e) {
      console.log(e.code, e.message);
    }
  };

  return (
    <Container>
      <View style={{flex:1, padding:16}}>
        <Button title='show picker' onPress={openPicker}></Button>
      </View>
    </Container>
  );
};

export default Profile;

 

Solution

처음에 콘솔 창을 통해 확인한 오류문에서 {_U, _V, _W, _X} 생뚱맞은 key값이 문제라고 하길래 정확한 문제를 찾지 못했는데 알고보니 render를 포함하는 component는 async로 선언할 수 없다는 걸 알게됐고 해당 부분을 고쳐주어 간단하게 해결할 수 있었다.

 

수정한 코드

const Profile = () => {
  const [images, setImages] = useState([]);

  const openPicker = async () => {
    try {

      const response = await MultipleImagePicker.openPicker({
        usedCameraButton: false,
        maxVideo: 1,
        selectedAssets: images,
        isExportThumbnail: true,
        isCrop: true,
        isCropCircle: true,
      });

      console.log('response: ', response);
      setImages(response);
      console.log('Images: ', images);

    } catch (e) {
      console.log(e.code, e.message);
    }
  };

  return (
    <Container>
      <View style={{flex:1, padding:16}}>
        <Button title='show picker' onPress={openPicker}></Button>
      </View>
    </Container>
  );
};

export default Profile;