使用typescript了解React.js状态

我正在asp.net核心应用程序中使用typescript和react.js。 我收到一个错误，类型readonly上不存在TS属性“Persons”。 有人能告诉我如何克服这个问题吗

export default class HelloWorld extends React.Component<{}, {}> {
    constructor(props: any) {
        super(props);
        this.state = {
            persons: [
                        { name: 'Max', age: 28 },
                        { name: 'Max', age: 28 }
                    ]
        }
    }

    public render() {
        return (
            <div>
                <Person {this.state.persons[0].name} age="28"> My hobbies: racing</Person>
            </div>
        );
    }


import * as React from 'react';

const person = (props: any) => {
    return (
    <div>
            <p> Im {props.name} {props.age}</p>
            <p>{props.children}</p>
    </div>
    ) 

};

export default person;

导出默认类HelloWorld扩展React.Component{
构造器（道具：任何）{
超级（道具）；
此.state={
人员：[
{姓名：'Max'，年龄：28}，
{姓名：'Max'，年龄：28}
]
}
}
公共渲染（）{
返回(
我的爱好：赛车
);
}
从“React”导入*作为React；
const person=（道具：任意）=>{
返回(
Im{props.name}{props.age}

{props.children}

) 
};
出口违约人；

---

谢谢

看起来您需要将分配给state的数组类型标记为只读

import * as React from 'react'

interface HelloWorldI {
     persons: ReadonlyArray<PersonI>
}

interface PersonI {
     name: string,
     age: number
}

export default class HelloWorld extends React.Component<{}, HelloWorldI> {
constructor(props) {
    super(props)
    const p: ReadonlyArray<PersonI> = [
        { name: 'Max', age: 28 },
        { name: 'Max', age: 28 },
    ]

    this.state = {
        persons: p,
    }
}

public render() {
    return (
        <div>
          <Person name={this.state.persons[0].name}
                  age= {this.state.persons[0].age}>
          My hobbies: racing
          </Person>
        </div>
    )
  }
}

class Person extends React.Component<{name: string, age: number}, {}>     {
  render() {
    return( <p>{this.props.name} and {this.props.age}</p> )
  }
}

import*作为来自“React”的React
接口HelloWorldI{
个人：ReadonlyArray
}
接口PersonI{
名称：string，
年龄:数目
}
导出默认类HelloWorld扩展React.Component{
建造师（道具）{
超级（道具）
常数p:ReadonlyArray=[
{姓名：'Max'，年龄：28}，
{姓名：'Max'，年龄：28}，
]
此.state={
个人:p,，
}
}
公共渲染（）{
返回(
我的爱好：赛车
)
}
}
类Person扩展React.Component{
render（）{
返回（{this.props.name}和{this.props.age}
）
}
}

这些是否真的与asp.net有关？我看不出是怎么回事。您可能可以删除该标记。1.这是一个编译器错误还是一个运行时错误？2.此代码中没有显示

人员

，因此您要么是在解释错误消息，要么是没有显示正确的代码。此人就是此代码从“React”导入React；const Person=（props）=>{return{props.name}和{props.age}

}导出默认Person；我在this.state.Person[0]中遇到编译器错误.name谢谢你的解决方案。你能推荐一些使用react的typescript的教程吗？我主要使用了TS网站上的教程：Thank Brain。上一个问题我试图在代码中添加一个事件处理程序来返回一个人的id。你能告诉我正确的方法吗？我在这里发布了这个问题