Почему ошибка броска машинописи при useState реагирует

Question

Я застрял в выяснении, почему TS выдает мне кучу ошибок, хотя я уже предоставил интерфейс для initialState для одного из моих состояний.

Может кто-нибудь помочь с моим кодом ниже?

interface initialStateProps {
  eventInfo: {
    name: string;
    location: string;
  }
}

class Dashboard extends Component<RouteComponentProps> {
  //what is wrong here? ts showing bunch of error?
  const [formValues, setFormValues] = useState<initialStateProps>({
    eventInfo: {
      name: '',
      location: ''
    }
  })

  return <div></div>

}

Answer 1

Кажется, что вы пытаетесь использовать React Functional Components, так как вы используете хук useState .

В этом случае вам не следует создавать класс и расширять его с React.Component, так как они предназначены для определения компонентов класса.

Так вы можете определять функциональные компоненты, используя React и TypeScript.

interface initialStateProps {
  eventInfo: {
    name: string; 
    location: string;
  }
}

const Dashboard: React.FC = () => {
  const [formValues, setFormValues] = useState<initialStateProps>({
    eventInfo: {
      name: '',
      location: ''
    }
  })

  return <div></div>

};