类型“ {}”中缺少属性“ profileStore”，但类型为“ Readonly <appprops>”时必需。ts（2741）

Question

我正在使用mobx反应类型脚本

<MainNote/>为什么显示错误

我是否需要设置默认道具？

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

我不想传递道具，因为它是mobx弹出的道具。

感谢您的帮助

---

代码在下面

---

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

答案是在组件中设置默认道具

  static defaultProps = {profileStore:{}}

Answer 2

强制个人资料存储道具来自：

interface AppProps {
  profileStore: IProfileStore;
}

到可选

interface AppProps {
  profileStore?: IProfileStore;
}

Answer 3

对于看到相同错误的其他人。

当您使用 withStyles 并在花括号中导入该类时会发生同样的问题，如下所示：

    import { MainNote } from './MainNote';

这直接导入类本身而不应用样式，因此它缺少classes。您只需要删除花括号即可导入 default 导出：

    import MainNote from './MainNote';