React 中用于自定义对象键的 Prop-Types

Question

我有一个像这样的对象类型：

interface DataType {
    labels: string[];
    datasets: {
        [key: string]: number[]
    };
}

我试图将它的 prop-type 定义为：

data: PropTypes.objectOf(
    PropTypes.exact({
        labels: PropTypes.arrayOf(PropTypes.string).isRequired,
        datasets: PropTypes.objectOf(
            PropTypes.shape({
                data: PropTypes.arrayOf(PropTypes.number),
            })
        )
    })
).isRequired,

但我收到此错误：

(property) data?: Validator<DataType> | undefined
Type 'Validator<{ [x: string]: Required<InferProps<{ labels: Validator<(string | null | undefined) 
[]>; datasets: Requireable<{ [x: string]: InferProps<{ data: Requireable<(number | null | undefined) 
[]>; }> | null | undefined; }>; }>> | null | undefined; }>' is not assignable to type 
'Validator<DataType>'.
Type '{ [x: string]: Required<InferProps<{ labels: Validator<(string | null | undefined)[]>; 
datasets: Requireable<{ [x: string]: InferProps<{ data: Requireable<(number | null | undefined)[]>; 
}> | null | undefined; }>; }>> | null | undefined; }' is missing the following properties from type 
'DataType': labels, datasets ts(2322)

谁能帮我解决这个问题。

Answer 1

您无需将datasets 属性包装在PropTypes.objectOf() 中。我认为您的 proptypes 正在破坏，因为您在 DataType 声明中使用了 [key :string]。如错误所示，data 未定义为 DatType 类型。

这是我使用 DataType 创建的示例对象

{
    "labels": ["string1","string2"],
    "datasets": {
        "data" : [1,2,3]
    }
}

这里是proptypes结构：

data : PropTypes.shape({
  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
  datasets: PropTypes.shape({
    data: PropTypes.arrayOf(PropTypes.number)
  }).isRequired
}).isRequired;