反应：在打字稿功能组件中'.map is missing in props validation'

Question

对于Typescript函数组件，我在Lint中得到以下错误。我该如何修复？

道具验证中缺少

paymentListData.map'，paymentListData.length 也得到了类似的东西

type Props = {
paymentListData: PaymentState[];
};

const PaymentList = ({
paymentListData
}: Props) => {
return (
<Box>
{paymentListData?.map(payment => (
<PaymentCollectedRow
key={payment.paymentId}
patientId={patientId}
serviceLocationGuid={serviceLocationGuid}
payment={payment}
receiptRequest={receiptRequest}
/>
))}

stackoverflow中的解决方案适用于类，而不是Typescript函数。

ESLint:'；。道具验证中缺少地图'；Typescript react 中的(eslint-react/prop-types(

Answer 1

您可以像在类中一样对功能组件执行PropTypes检查。

import PropTypes from 'prop-types'
function HelloWorldComponent({ name }) {
return (
<div>Hello, {name}</div>
)
}
HelloWorldComponent.propTypes = {
name: PropTypes.string
}
export default HelloWorldComponent

您可以在此处查看文档->https://reactjs.org/docs/typechecking-with-proptypes.html