Question

只是明天尝试使用React在TypeScript上进行编码，并且有些东西不为人所知，如果有人帮助我，我会很高兴

结构：我有父应用程序，他使用子组件后列表等。

//app.js
import PostList from '../post-list/post-list';
function App() {
    return (
            <Container>
                 <GlobalStyle />

                <Header>
                    <h1>Hello World</h1>
                </Header>

                <main>
                   **<PostList />** *//here webstorm tell me this error*
                </main>
            </Container>
    );
}

 //post-list.js

interface postInterface {
    id: number
    title: string
    body: string
}

type postList = [postInterface];


const PostList = (posts: postList)=>{

    if (!posts) {
        return <h1>Loading...</h1>
    }

    const items = posts.map((post, index) => <Post key={index} {...post}/>);

    return(
        <PostListView>
            {items}
        </PostListView>
    )

};


export default PostList;

PostList.getInitialProps = async ()=>{
  const posts = await service.getAllPosts();
  return {posts}
};

[error] G：/WORK/Projects/blog-app/src/components/app/app.tsx（16,23）中的错误： 16:23类型“ {}”不可分配给类型“ postList”。 14 | 15 |

16 | | ^ 17 |

Answer 1

此调用返回什么类型？

  const posts = await service.getAllPosts();

该函数的返回类型似乎与组件的输入签名不匹配。

Answer 2

您忘记了这些{}

const PostList = ({posts: postList})=>{

因为React组件期望object的{{1}}，而不是您传递了props var

类型“ {}”不可分配给类型“ postList”

2 个答案: