【前端】关于react+typescript遇到的“泛型约定组件状态”,报错:Property ‘***‘ does not exist on type ‘Readonly<{}>‘.ts(2339)

最近自己做东西的时候又遇到这么一个报错:Property ‘***’ does not exist on type ‘Readonly<{}>’.ts(2339),报错的意思可以参考typescript的官方错误信息列表:typescript官方错误信息列表,简单说就是我们使用的state中的数据,必须要在一开始用泛型去规定一下类型,防止错误类型的数据传进来。

如果想深入了解,可以参考官方文档:typescript–泛型

接下来我说一下我的解决方法,我的解决方法是参考了这篇文章:原文链接,以下是我出现问题时的主要代码:

class ChapterList extends React.Component {

    constructor(prop) {
        super(prop)
        this.state = {
            // 章、节 chapter section
            chapterId:0,
            chapterName:'第五章',
            chapterContent: [
                {
                    sectionId: 0,
                    sectionName: '第一节',
                    subsectionNum: 2,
                    subsection: [
                        {
                            subsectionId: 0,
                            subsectionName: '第一小节'
                        },
                        {
                            subsectionId: 1,
                            subsectionName: '第二小节'
                        }
                    ]
                }
            ]
        }
    }

    handleClick = (e) => {
        console.log('click ', e);
    }

    render() {

        return (
            <Menu
                onClick={this.handleClick}
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                mode="inline"
            >
                <div style={{ height: "150px", textAlign: "center", backgroundColor: "#2e92cd" }}>
                    <h1 style={{ lineHeight: "100px", fontSize: "30px" }}>{this.state.chapterName}</h1><br />
                    <h4 style={{ color: "white" }}>一次函数</h4>
                </div>
            </Menu>
        )
    }
}

改正之后的代码:

class ChapterList extends React.Component 
<{
    navList ?: any
},
{
    chapterId ?: number
    chapterName ?: string
    chapterContent ?: object
}
>
{

    constructor(prop) {
        super(prop)
        this.state = {
            // 章、节 chapter section
            chapterId:0,
            chapterName:'第五章',
            chapterContent: [
                {
                    sectionId: 0,
                    sectionName: '第一节',
                    subsectionNum: 2,
                    subsection: [
                        {
                            subsectionId: 0,
                            subsectionName: '第一小节'
                        },
                        {
                            subsectionId: 1,
                            subsectionName: '第二小节'
                        }
                    ]
                }
            ]
        }
    }

    handleClick = (e) => {
        console.log('click ', e);
    }

    render() {

        return (
            <Menu
                onClick={this.handleClick}
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                mode="inline"
            >
                <div style={{ height: "150px", textAlign: "center", backgroundColor: "#2e92cd" }}>
                    <h1 style={{ lineHeight: "100px", fontSize: "30px" }}>{this.state.chapterName}</h1><br />
                    <h4 style={{ color: "white" }}>一次函数</h4>
                </div>
            </Menu>
        )
    }
}

也就是在创建类的时候,规定一下state里数据的类型,可以自己对比一下。

总结:因为之前没有系统的看过typescript的文档,直接就上手了项目,导致现在遇到一些小问题,不过好在这些小问题网上都有现成的解决方案,把问题解决掉,总结下来,就变成了自己的东西,用项目去驱动学习,这样印象会更加深刻。就算我前期看了文档,估计实际写的时候也不会想到这个问题。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页