使用 React Typescript 的状态：类型“IntrinsicAttributes 和 IntrinsicClassAttributes”上不存在属性

Question

我是 React 与 Typescript 的新手，我收到一条错误消息：

没有重载匹配这个调用。重载 1 of 2，'(props: Readonly<{}>): IndexPage'，出现以下错误。

输入 '{ 注释：{ 1: { _id: number; 标题：字符串；正文：字符串；更新时间：日期；}; }; }' 不可分配到类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'。类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode;”上不存在属性“notes” }>'。重载 2 of 2, '(props: {}, context?: any): IndexPage'，出现以下错误。输入 '{ 注释：{ 1: { _id: number; 标题：字符串；正文：字符串；更新时间：日期；}; }; }' 不可分配到类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'。属性“注释” 不存在于类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'。

  **App.tsx**
//import statements 

  type Note={
notes: {
    1: {
_id: number;
body:string;
title:string;
updatedAt: Date

    }
} }
type State={notes: {[key:number]: Note} }
class App extends React.Component <State> {
state={
    notes: {
        1: {
            _id:1,
            title: "hello world",
            body: "this is the body",
            updatedAt:new Date()
        }
      }
   }
   render(){
   return (
    <div className="App">
        <Nav/>
        <Headers/>
        <IndexPage notes = {this.state.notes}/>

    </div>
  );
}
 }
export default App;

================================================== ==== 索引.tsx：

import React from 'react';

export default class IndexPage extends React.Component{
render(){
    const notes=Object.values(this.props.notes);
    return(
        <div>
            <h1> posts</h1>
            <h2> {notes[0].title}</h2>
        </div>
    )
  }
  }

Answer 1

您必须在组件上指定 Props 和 State 类型：

应用程序

type Note = {
  _id: number,
  title: string,
  body: string,
  updatedAt: Date
}
type Props = {/*props properties*/}
type State = {
  notes: {[key:number]: Note}
}
class App extends React.Component<Props, State>{
  state={
    notes: {
        1: {
            _id:1,
            title: "hello world",
            body: "this is the body",
            updatedAt:new Date()
        }
      }
   }
   render(){
     return (
      <div className="App">
        <Nav/>
        <Headers/>
        <IndexPage notes = {this.state.notes}/>
    </div>
    );
  }
}
export default App;

索引页

//You should extract Note in other file and import it on both components
type Note = {
  _id: number,
  title: string,
  body: string,
  updatedAt: Date
}
type Props = {
  notes: {[key:number]: Note}
}
export default class IndexPage extends React.Component<Props>{
  render(){
    const notes=Object.values(this.props.notes);
    return(
        <div>
            <h1> posts</h1>
            <h2> {notes[0].title}</h2>
        </div>
    )
  }
}