ReactJS中应出现赋值或函数调用错误

Question

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

以下是代码片段：

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>})
)
}
}

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

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

Answer 1

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

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

Answer 2

当您为箭头函数使用大括号时：

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

则大括号之间的每个项都是语句。您有一个表达式语句，它什么都不做：

<Stagger in>...</Stagger>

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

return <Stagger in>...<Stagger>

或者将箭头函数更改为不使用大括号，这样就可以使用表达式作为主体，从而创建一个隐式返回语句：

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