Arrays 如何修复“预期的赋值或函数调用，而不是看到表达式”

我使用了要在jsx中动态渲染的对象数组

packageItems=[
    {
        id: 1,
        image: require('./assets/image1.png'),
        title: 'title1',

    },
    {
        id: 2,
        image: require('./assets/image2.png'),
        title: 'title',

    }
]

我要在同一组件中渲染的对象：

return (
 {packageItems.map((packageItem, index) => {
                <div className="card" style={{ width: "18rem" }} key={packageItem.id}>
                    <img src={packageItem.image} className="card-img-top" alt="static website icon" />
                    <div className="card-body">
                        <h3 className="card-title">{packageItem.title}</h3>
                    </div><hr />                      
                </div>
            })}
)

您需要从映射显式返回jsx

看看上面的代码：

您不需要返回arr.map/*…*/因为从它返回的数组已经隐式嵌入到jsx块中。请记住，数组是react的子数组。但是作为参数传递给map的函数还需要显式返回映射数组的新项。使用单行箭头函数时，return语句也是隐式的

arr.map(item => <div/>)

在这里，您可以安全地省略return，但是对于像您这样占用多行的函数，您需要显式地返回转换

arr.map(item =>{
    return(
        <>
            <span> Foo </span>
        </>
    )
})

您需要从映射显式返回jsx

看看上面的代码：

您不需要返回arr.map/*…*/因为从它返回的数组已经隐式嵌入到jsx块中。请记住，数组是react的子数组。但是作为参数传递给map的函数还需要显式返回映射数组的新项。使用单行箭头函数时，return语句也是隐式的

arr.map(item => <div/>)

在这里，您可以安全地省略return，但是对于像您这样占用多行的函数，您需要显式地返回转换

arr.map(item =>{
    return(
        <>
            <span> Foo </span>
        </>
    )
})

---

哇！非常感谢。。已经一个小时了。。。它很有魅力。。但是为什么我不明白。你能解释一下答案吗哇！非常感谢。。已经一个小时了。。。它很有魅力。。但是为什么我不明白。你能解释一下答案吗

arr.map(item =>{
    return(
        <>
            <span> Foo </span>
        </>
    )
})