数据类型在数据类型脚本道具中的父组件和子组件之间不一致

Question

我正在构建一个具有react和typescript 的应用程序

我正在使用道具将我的数据传递给子组件

我将属性的数据类型作为父组件中的接口进行了清除

其向下传递到子组件

但我得到了一个错误，它不符合

母组件

interface IProperty {
property: {
title: string;
}[];
}
const Dashboard = () => {
const [loading, setLoading] = useState(true);
const [properties, setProperties] = useState<IProperty["property"]>([
{
title: "New estate"
}
]);
return (
<div className="__recent-upload">
<ListOfProperties loading={loading} datas={properties} />
</div>
)
export default Dashboard 

子组件

interface IProperty {
property: {
title: string;
}[];
}
const ListOfProperties: React.FC<{ loading: boolean, datas: IProperty }> = ({ loading, datas }) => {
return (
<div>
<h4 className="ml-4">Newly uploaded Properties</h4>
<Skeleton active loading={loading}>
<div className="table">

</div>
</Skeleton>
</div>
);
};
export default ListOfProperties;

错误

TS2741: Property 'property' is missing in type '{ title: string; }[]' 
but required in type 'IProperty'.

Answer 1

您有两种可能的解决方案：1-使用相同类型的useState

const [properties, setProperties] = useState<IProperty>([{
property: {
title: "New estate"
}
}]);

2-或绕过正确的物体来支撑

<ListOfProperties loading={loading} datas={
{property:properties}
} />

Answer 2

您的错误源于data需要一个带有property键的完整对象。但您只发送一个数组[ {title: "foo" } ]。