Question

我正在将 Nextjs与Typescript一起使用。

我想使用Get请求获取帖子。我的代码这一行出现错误：

render() {
const {posts}= this.state

错误消息是：

“ Readonly <{}>”类型上不存在属性“帖子”。

这是我的代码：

import React, { Component } from 'react';
import axios from 'axios';

interface AbcState {
  posts: any[];
}

export class PostL extends Component<AbcState>{

  constructor(props) {
    super(props)
    this.state = {
      posts: []
    }
  }

  componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        console.log(response)
        this.setState({ posts: response.data })
      })
      .catch(error => {
        console.log(error)
        this.setState({ errorMsg: 'Error retrieving data' })
      })

  }

  render() {
    const { posts } = this.state
    return (
      <div>
        List of Posts
                    {
          posts.length ?
            posts.map(post => <div key={post.id}>{post.title}</div>) : null
        }
      </div>
    )
  }
}

export default PostL

Answer 1

如果您希望组件在状态中具有价值，则需要像这样定义它。

一般示例：

interface MyProps {
  ...
}

interface MyState {
  value: string
}

class App extends React.Component<MyProps, MyState> {
  ...
}

Answer 2

尝试这样：

export class PostL extends Component<any, any>

然后将道具和状态约束为实际形状。

类型“ Readonly <{}>”上不存在属性“ posts”

2 个答案: