属性“ 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弹出的道具。

谢谢您的帮助

---

代码如下

---

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

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;

Answer 1

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

  static defaultProps = {profileStore:{}}

Answer 2

从以下位置强制配置文件存储道具：

interface AppProps {
  profileStore: IProfileStore;
}

到可选

interface AppProps {
  profileStore?: IProfileStore;
}