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

Posted 2023-02-21

【中文标题】预期 ReactJS 中的赋值或函数调用错误 [重复]

【英文标题】：Expected an assignment or function call error in ReactJS [duplicate]

【发布时间】：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' 在这里，你应该使用双引号 (")

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