类型上不存在属性'username'

Question

export let microEventBus: MicroEventBus = (window as any).microEventBus;
export interface IAppState {
showDetails: boolean;
product: IProduct | null;
collectionInstance: Collection;
username: string;
}
//const collectionInstance = new Collection();
class App extends React.Component<IAppProps, IAppState> {
constructor(props: IAppProps) {
super(props);
this.showDetailView = this.showDetailView.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
showDetails: false,
product: null,
collectionInstance: new Collection(),
username: '',
};
}
componentDidMount() {
this.processUserLoginEvent = this.processUserLoginEvent.bind(this);
microEventBus.on('user-logged-in').subscribe(this.processUserLoginEvent);
ajax.getJSON('http://128.0.0.1:3000/products').subscribe((data) => {
let collection = new Collection();
collection.items = data as IProduct[];
this.setState({
showDetails: false,
product: null,
collectionInstance: collection,
});
});
}
render() {
return (
<div>
{this.state.collectionInstance.items.length < 1 ? (
<div className='App-header'>
<CircularProgress />
</div>
) : (
''
)}
<CollectionView
{...this.state.collectionInstance}
handlerItemClicked={this.showDetailView}></CollectionView>
<DetailView
open={this.state.showDetails}
product={this.state.product}
handleClose={this.handleClose}
**problem**-->username={this.state.username}></DetailView>

我的代码有问题。username属性出现类型错误。我试图将字符串的类型更改为any的类型，但这并没有解决我的问题。有什么建议吗？

错误：

类型"｛open:boolean；product:IProduct|null；handleClose:((=>无效的username:string；｝'不可分配给类型'本质属性&IntrinsicClassAttributes&只读&只读<gt；'。属性"username"确实存在在类型'IntrinsicAttributes&IntrinsicClassAttributes&只读&只读<gt；'。ts(2322(

Answer 1

从错误消息来看，DetailView组件似乎不支持username道具。也就是说，您看到的错误代码如下：

<DetailView
open={this.state.showDetails}
product={this.state.product}
handleClose={this.handleClose}
username={this.state.username}></DetailView>

这并不是因为username在状态上不存在，而是因为DetailView组件需要不同的道具。