如何修复'期望一个赋值或函数调用，而不是看到一个表达式'

Question

我已经使用了我想在 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>
            })}
)

Answer 1

您需要从您的map 中明确地return jsx

return (
    {
        packageItems.map((packageItem, index) => {
            return (
                <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 块内部调用 map 时，您不需要返回，因为表达式会立即执行：

const Component = () =>{
    return(
        { arr.map(item => <div />) }
    )
}

看看上面的代码：

您不需要return arr.map(/*...*/)，因为从它返回的数组已经隐式嵌入到您的jsx 块中（请记住arrays 是有效的react 子代）。但是作为参数传递给map 的函数也需要显式返回映射数组的新项。当使用一行arrow functions 时，return 语句也是隐式的

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

相当于

arr.map(item =>{
    return item
})

在这里您可以放心地省略 return，但对于需要多行的函数（如您的），您需要明确地 return 进行转换

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