• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

【前端】关于react+typescript遇到的“泛型约定组件状态”,报错:Property‘***‘doe ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
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的文档,直接就上手了项目,导致现在遇到一些小问题,不过好在这些小问题网上都有现成的解决方案,把问题解决掉,总结下来,就变成了自己的东西,用项目去驱动学习,这样印象会更加深刻。就算我前期看了文档,估计实际写的时候也不会想到这个问题。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
如何解决Typescript对ReactHooks中使用mobx时props的类型检查发布时间:2022-07-18
下一篇:
在vscode上运行typescript文件发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap