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

Posted 2023-02-22

【中文标题】如何修复\'期望一个赋值或函数调用，而不是看到一个表达式\'

【英文标题】：how to fix ' Expected an assignment or function call and instead saw an expression'如何修复'期望一个赋值或函数调用，而不是看到一个表达式'

【发布时间】：2020-02-28 00:26:03

【问题描述】：

我已经使用了我想在 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"  />
                    <div className="card-body">
                        <h3 className="card-title">packageItem.title</h3>
                    </div><hr />                      
                </div>
            )
)

【参考方案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"  />
                    <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>
        </>
    )
)

【讨论】：

哇！非常感谢.. 已经过了一个小时... 它就像一个魅力.. 但为什么我不明白。你能解释一下吗

更新了答案