使用 React Typescript 的状态：类型'IntrinsicAttributes & IntrinsicClassAttributes 上不存在属性

Posted 2023-02-21

【中文标题】使用 React Typescript 的状态：类型\'IntrinsicAttributes & IntrinsicClassAttributes 上不存在属性

【英文标题】：State using React Typescript: Property does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes使用 React Typescript 的状态：类型'IntrinsicAttributes & IntrinsicClassAttributes 上不存在属性

【发布时间】：2020-04-23 00:07:33

【问题描述】：

我是使用 Typescript 进行 React 的新手，我收到一条错误提示：

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

键入'注释：1：_id：数字；标题：字符串；正文：字符串； 更新时间：日期； ; ; ' 不可分配给类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly'。 类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly'。重载 2 of 2, '(props: , context?: 任何）：IndexPage'，给出了以下错误。 键入'注释：1：_id：数字；标题：字符串；正文：字符串；更新时间：日期； ; ; ' 不可分配给类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly'。 类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly'。

  **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;

================================================ ======= Index.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>
    )
  
  

【参考方案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>
    )
  

【讨论】：

我已经完成并重新上传了我的代码。还是同样的错误。你能查一下为什么吗？

我编辑了我的答案。您必须在所有组件上指定 Props（并在必要时声明）

完成！立即查看

我在 Note 上有错字（我写的是 updateAt 而不是 updatedAt）。关于在另一个文件中提取笔记，检查this

你是对的。我理解那部分，这就是为什么我将您的答案标记为正确并已解决:)