Property ‘newName‘ does not exist on type ‘Readonly＜{}＞‘

最新推荐文章于 2023-12-21 22:33:38 发布

Alun丶0902

最新推荐文章于 2023-12-21 22:33:38 发布

阅读量996

点赞数 1

文章标签： javascript typescript 开发语言前端 react.js

本文链接：https://blog.csdn.net/LHLKKK/article/details/127411901

版权

在使用 react + typeScript 过程中遇到这样的一个错误： Property 'newName' does not exist on type 'Readonly<{}>'.

错误代码如下：

class Welcome extends React.Component<TextType> {
  constructor(props: TextType) {
    super(props);
    console.log("Welcome类的props", props);
    this.state = { newName: "父亲起的名" };
  }
  // 组件渲染完成执行的生命周期函数
  componentDidMount() {
    // 可以去执行网络请求，耗时的一些逻辑
    setTimeout(()=>{       
        this.setState({newName:'父亲起的新名字'+'---'+this.props.content},()=>{
            // 这里是通知外部，状态改变完成
            console.log('名字拼接完成')
        })
    },3000)
  }
  render() {
    const { fontSize, content } = this.props; //解构赋值
    const { newName } = this.state;
    return (
      <div>
        <Text fontSize="20px" content={newName}></Text>
        <Text fontSize={fontSize} content={content}></Text>
      </div>
    );
  }
}

改正之后代码：

class Welcome extends React.Component<TextType,any> {
  constructor(props: TextType) {
    super(props);
    console.log("Welcome类的props", props);
    this.state = { newName: "父亲起的名" };
  }
  // 组件渲染完成执行的生命周期函数
  componentDidMount() {
    // 可以去执行网络请求，耗时的一些逻辑
    setTimeout(()=>{       
        this.setState({newName:'父亲起的新名字'+'---'+this.props.content},()=>{
            // 这里是通知外部，状态改变完成
            console.log('名字拼接完成')
        })
    },3000)
  }
  render() {
    const { fontSize, content } = this.props; //解构赋值
    const { newName } = this.state;
    return (
      <div>
        <Text fontSize="20px" content={newName}></Text>
        <Text fontSize={fontSize} content={content}></Text>
      </div>
    );
  }
}

改变之处在于第一行尖括号里面的内容

"class Welcome extends React.Component<TextType>"错误的写法

"class Welcome extends React.Component<TextType,any>"改正后写法

仅供参考~~~