Question

在将数组传递给组件时，出现错误-'this.props.tasks.map不是函数'

我的Main.js代码

let posts = [
    {
        id: 1,
        description: "This is a task",
        status: "pending"
    },
    {
        id: 2,
        description: "This is another task",
        status: "pending"
    },
    {
        id: 3,
        description: "This is an easy task",
        status: "pending"

    }
];



class Main extends Component {
    render() {
        return <div>
            <Title title="Photowall" />
            <Photowall posts={ posts } />

        </div>
    }
}

和Photowall.js代码

 render() {
        return <div>
            {this.props.posts.map((item) => <Photo key={item} post={item}/>)}
             </div>

    }

Answer 1

您必须像下面那样通过posts。

<Photowall posts={posts} />

Photowall.js
您必须通过key={item.id}，我想这会起作用。

 render() {
        return <div>
            {this.props.posts.map((item) => <Photo key={item.id} post={item}/>)}
             </div>

    }

照片

class Photo extends Component { 
   render() { 
        const data = this.props.post; 
        return <p>{data.description}</p> 
    } 
}

如果您像{{ posts }}一样经过，则会在另一端考虑如下。

{
   posts: [
    {
        id: 1,
        description: "This is a task",
        status: "pending"
    },
    {
        id: 2,
        description: "This is another task",
        status: "pending"
    },
    {
        id: 3,
        description: "This is an easy task",
        status: "pending"

    }
]
}

这就是为什么这不起作用。

希望这对您有用！

Answer 2

我想你打算写

<Photowall posts={ posts } />

Answer 3

实际上，您通过Object of array来传递posts={{posts}}。

仅通过此操作

<Photowall posts={ posts } />

Demo

“ this.props.tasks.map不是函数”错误-反应错误

3 个答案: