类型“{}”中缺少属性“profileStore”，但类型“只读”中需要<AppProps> &#39;.ts(2741)

Question

I am using mobx react a type script

Why does <MainNote/> show the error

Do i just need to set default props?

Property 'profileStore' is missing in type '{}' but required in type 'Readonly<AppProps>'.ts(2741)
MainNote.tsx(9, 3): 'profileStore' is declared here.
(alias) class MainNote
import MainNote

I do not want to pass the prop in as it is a prop ejected by mobx.

Thanks for the help

---

The code is below

---

 import React, { Component } from 'react'; import MainNote from './MainNote'; import { observable, computed } from 'mobx' import { observer, inject, IStoresToProps } from 'mobx-react' import { IStore } from '../interfaces/store/IStore' import style from '../styles/App.module.css'; import { IProfileStore } from '../interfaces/Profile/IProfileStore'; import { iProfile } from '../interfaces/Profile/iProfile'; interface AppProps { profileStore?: IProfileStore } export interface IProfileStore { profile: iProfile, counter: number, loadProfile?: () => void } @inject("profileStore") @observer class App extends Component<AppProps> { static defaultProps = { profileStore: {counter: 0}}; render() { return ( <div className={`container-fluid w-100 h-100 ${style.background}`}> <MainNote/> {console.log('props', this.props.profileStore) } </div> ); } } export default App;

 import React, { Component } from 'react'; import { observable, computed } from 'mobx' import { observer, inject, IStoresToProps } from 'mobx-react' import style from '../styles/MainNote.module.css' import { IStore } from '../interfaces/store/IStore' import {IProsStore} from '../interfaces/store/IPropsStore' interface AppProps { profileStore: IProfileStore; } interface IProfileStore { profile: iProfile; counter: number; loadProfile?: () => void; } interface iProfile { Details: iDetails; Address: iAddress; Notes: iNote[]; } interface iDetails { Name: string; Email: string; Age: number; CellNumber: number; } interface iAddress { No: number; Road: string; Street: string; Place: string; } interface iNote { Date: Date | string; Subject: string; Text: string; Private: boolean; Archived: boolean; } @inject("profileStore") @observer class MainNote extends Component<AppProps> { render() { const { Address } = this.props.profileStore.profile; console.log('s', this.props.profileStore.profile.Address.No) return ( <div className={style.makeLookCool}> <ul className="list-group"> <li className="list-group-item">{Address.No} {Address.Place} {Address.Road} {Address.Street}</li> </ul> </div> ); } } export default MainNote;

 import React from 'react'; import ReactDOM from 'react-dom'; import 'bootstrap/dist/css/bootstrap.css'; import './styles/index.css'; import App from "./componenets/App"; import { Provider } from 'mobx-react'; import {IProsStore} from './interfaces/store/IPropsStore' import * as serviceWorker from './serviceWorker'; // import NotesStore from "./NotesStore"; // import CounterStore from "./CounterStore"; import ProfileStore from './store/ProfileStore'; import { IStore } from './interfaces/store/IStore'; const Store: IStore = { profileStore: new ProfileStore(), }; ReactDOM.render( <Provider {...Store}> <App /> </Provider>, document.getElementById('root'));

Answer 1

Make profileStore props mandatory from:

interface AppProps {
  profileStore: IProfileStore;
}

to optional

interface AppProps {
  profileStore?: IProfileStore;
}

Answer 2

答案是在组件中设置默认的prop

  static defaultProps = {profileStore:{}}

Answer 3

For others who see the same error.

The same problem happens when you use withStyles and you import that class in a curly braces like the following:

    import { MainNote } from './MainNote';

this imports directly the class itself without applying the styles and therefore it lacks the classes . You just need to remove the curly braces to import the default export:

    import MainNote from './MainNote';