如何在 React/React-Native 中对嵌套参数进行类型检查

Question

我有一个名为 data.messages 的对象数组，我想在名为“Chat”的组件中进行类型检查：

Chat.propTypes = {
    data: PropTypes.shape({
        messages: PropTypes.arrayOf({
            createdAt: PropTypes.string.isRequired,
            id: PropTypes.string.isRequired,
            image: PropTypes.string,
            isTyping: PropTypes.bool,
            text: PropTypes.string.isRequired,
            user: PropTypes.shape({
                firstName: PropTypes.string.isRequired,
                id: PropTypes.string.isRequired,
            })
        })
    })
}

但是，我收到以下错误消息：

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

当我尝试执行以下操作时：

Chat.propTypes = {
    data: PropTypes.shape({
        messages: PropTypes.array({
            createdAt: PropTypes.string.isRequired,
            id: PropTypes.string.isRequired,
            image: PropTypes.string,
            isTyping: PropTypes.bool,
            text: PropTypes.string.isRequired,
            user: PropTypes.shape({
                firstName: PropTypes.string.isRequired,
                id: PropTypes.string.isRequired,
            })
        })
    })
}

我收到以下错误消息：

Warning: Failed propType: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them.

对象中的属性类型与上面指定的类型完全匹配，因此那部分没有错误。

Answer 1

尝试

Chat.propTypes = {
    data: PropTypes.shape({
        messages: PropTypes.arrayOf(PropTypes.shape({
            createdAt: PropTypes.string.isRequired,
            id: PropTypes.string.isRequired,
            image: PropTypes.string,
            isTyping: PropTypes.bool,
            text: PropTypes.string.isRequired,
            user: PropTypes.shape({
                firstName: PropTypes.string.isRequired,
                id: PropTypes.string.isRequired,
            })
        }))
    })
}

PropTypes.arrayOf(PropTypes.shape({...})) 是你错过的

如何在 React/React-Native 中对嵌套参数进行类型检查

How to typecheck nested params in React/React-Native

javascript

reactjs

react-native

react-proptypes