Получение ошибки при деструктурировании значения из состояния в TypeScript

#javascript #reactjs #typescript

#javascript #reactjs #машинописный текст

Вопрос:

введите описание изображения здесь

Когда я попытался деструктурировать значение notification_menu, я получаю ошибку, подобную этой

я использую Redux для управления состоянием

введите описание изображения здесь

 import React, { Suspense,Component } from 'react';
import { Switch, Route } from "react-router-dom";
import { connect } from 'react-redux';
import { NotificationMenu } from "./Redux/NotificationMenu/nof_selector";
 class App extends Component {
  state = {
    navOpen: false,
  };
  NavCall = () => {
    this.setState({ navOpen: !this.state.navOpen });
  };
   render() {
     console.log(this.props.notification_menu);
    const { navOpen } = this.state;
    const NavOpenStyleMargin = navOpen ? { marginLeft: "250px" } : {};
    return (
      <div>
    </div>
    )
  }
}
const mapStateToProps = (state:any) => {
  return {
    // userID: selectCurrentUser(state),
    // account_menu: AccountMenu(state),
    notification_menu: NotificationMenu(state),
  };
};
export default connect(mapStateToProps,null)(App);
 

Комментарии:

1. Подумайте о том, чтобы не any делать ошибки более явными — any своего рода противоречит цели использования TS

Ответ №1:

при использовании typescript вам необходимо объявить реквизиты и типы состояний для вашего компонента класса, например:

 interface IProps {
  notification_menu: string // define what type notification_menu is
}

interface IState {
  navOpen: boolean
}

class MyComponent extends React.Component<IProps, IState> {
  // code here
}