预期 ReactJS 中的赋值或函数调用错误 [重复]答案

【问题标题】：Expected an assignment or function call error in ReactJS [duplicate]预期 ReactJS 中的赋值或函数调用错误 [重复]
【发布时间】：2020-12-16 10:47:06
【问题描述】：

这实际上是我试图在 ReactJS 中实现的一个组件

这里是sn-p的代码：

const Leaders=({leaders, isLoading, errMess})=>{
    if (isLoading) {
        return (
            <Loading />
        )
    }
    else if (errMess) {
        return (
            <h4>{errMess}</h4>
        )
    }
    else {
        return (
            leaders.map((leader) => {
                <Stagger in>
                    <Fade in>
                        <Media>
                            <Media object left src={baseUrl + leader.image} alt={leader.name} className='my-image mt-5'></Media>
                            <Media body className="ml-5 mt-0">
                                <Media heading>
                                    {leader.name}
                                </Media>
                                <p className='font-card'>{leader.designation}</p>
                                <p>{leader.description}</p>
                                <hr></hr>
                            </Media>
                        </Media>
                    </Fade>
                </Stagger>})
        )
    }
}

但我收到一个错误：Expected an assignment or function call and instead saw an expression 在 else 条件的返回部分。

非常感谢解决此问题的解决方案

【问题讨论】：

代码看起来不错，但是这个 className='my-image mt-5' 在这里，你应该使用双引号 (")

标签： javascript reactjs

【解决方案1】：

看起来你的 map 函数最后没有返回任何东西，所以你必须在你的 jsx 中添加 return：

leaders.map((leader) => { return <Stagger in> ... // should add return

【讨论】：

这样就解决了问题，但是else条件不是作为一个整体返回的吗？为什么我需要在 map 函数中再次返回？
由于Array.prototye.map 是通过循环每个项目创建一个新数组并返回新数组，因此您的目的是为每个项目创建 JSX。如果您不返回任何内容，它将创建列表，其中每个项目都是 void 0 :)

【解决方案2】：

当你有一个箭头函数的花括号时：

(leader) => {
  // ...
}

...那么大括号之间的每一项都是一个语句。你有一个不做任何事情的表达式语句：

<Stagger in>...</Stagger>

你想要的是一个 return 语句，它将成为函数的结果。否则，该函数会隐式返回 undefined，如果您尝试渲染 undefined 值，React 会吐出错误：

return <Stagger in>...<Stagger>

...或将箭头函数更改为不使用花括号，这样您就可以将 表达式 作为主体，创建隐式返回语句：

(leader) => (
  <Stagger in>
    ...
  </Stagger>
)

【讨论】：