Warning: Failed prop type: Property ... of component ... has invalid PropType notation inside arrayOf.

error5 console

Warning: Failed prop type: Property … of component … has invalid PropType notation inside arrayOf.

error5 error

Object literal may only specity known properties, and ‘order’ does not exist in type ‘Validator‘.

prop으로 받는 데이터의 구조가 배열에 객체에 배열의 객체…막 복잡했다. propTypes로 객체의 타입을 지정했는데 자꾸면 콘솔에 에러와 코드에 빨간줄이 쫙쫙 생기길래 열심히 구글링하여 문제를 해결하였다.

넘겨주는 props를 직접 넘겨주지말고 shape() 으로 감싸서 넘겨주라는 것이었다. shape()은 타입을 검사하는 validator가 더 정교하게 타입을 검사할 수 있게한다.

구조가 복잡하다보니 shape을 한 경우 있고, isRequired를 한 경우 있고 등등 복잡해서 타입 지정이 제대로 되지 않았던 이유였다.

template.propTypes = {
  group: PropTypes.arrayOf(
    PropTYpes.shape({
      title: PropTypes.string.isRequired,
      items: PropTypes.arrayOf({
        order: PropTypes.number.isRequired, // 이부분에서 에러가 났었다!
        data: PropTypes.shape({
          ...
        })
      })
    })
  )
}
template.propTypes = {
  group: PropTypes.arrayOf(
    PropTYpes.shape({
      title: PropTypes.string.isRequired,
      items: PropTypes.arrayOf(
        PropTypes.shape({
          // 이부분에 배열 안에 들어가는 객체의 타입을 shape()으로 구체화시켜주었다! 해결!!
          order: PropTypes.number.isRequired,
          data: PropTypes.shape({
            ...
        })
        )
      })
    })
  )
}

참고한 영어 원문 - Clarification on the usage of imported PropTypes inside arrayOf()(에러발생)

참고한 영어 원문 - 해결책

참고한 영어 원문, How to specify the shape of an object with PropTypes(shape에 관한글)


@Sarah
개인적인 공부를 위해 만든 블로그입니다. 혹시 틀린 점이 있다면 메일로 남겨주시면 감사하겠습니다!

GitHubGmail