类型上不存在属性“用户名”

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>

I have problem with a code. I got a type error for username property. I try to change type of string to a type of any but that did't solved my problem. Any sugestions?

ERROR:

Type '{ open: boolean; product: IProduct | null; handleClose: () => void; username: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'. Property 'username' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'.ts(2322)

Answer 1

From the error message, it seems that the DetailView component does not support a username prop. That is to say, the error you see with the following code:

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

is not because username is absent on state, but because the DetailView component expects different props.