错误：元素类型对 React-app 无效

Question

我可以看到围绕这个特定错误有很多问题，但大多数问题似乎都没有答案，而那些已经回答的问题并不适用（或者我不明白它们是如何应用的。）。

这是我得到的错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `Posts`.

这是我在相关文件中的代码：

import React from 'react';
import './Posts.css'

class Posts extends React.Component {
    constructor() {
        super()
        this.state = {
            posts: []
        }
        console.log("from constructor");
    }

    componentDidMount() {
        fetch('http://jsonplaceholder.typicode.com/posts/')
            .then(response => response.json())
            .then(data => {
                this.setState({
                    posts: data
                })
            })
    }

    render() {
        return(
            <div className="Posts">
                {
                    this.state.posts.map(Post => {
                        return(
                            <Post title={Post.title} desc={Post.body}/>
                        )
                    })
                }
            </div>
        )
    }
}

export default Posts

我目前正在学习在线课程，这让我停滞不前，任何帮助将不胜感激。

Answer 1

您对 map 迭代器值和组件名称使用相同的变量。 将其更改为：

render() {
        return(
            <div className="Posts">
                {
                    this.state.posts.map(p => {
                        return(
                            <Post title={p.title} desc={p.body}/>
                        )
                    })
                }
            </div>
        )
    }