最近在学习react,在进行编码的过程中发现了如上错误,错误的意思是:希望是一个赋值或者是函数调用,而不是一个表达式。下面我们来分析一下错误。

首先我的代码是这样的:
在这里插入图片描述
错误提示是在map函数那里出错了,出错在于标红的花括号,因为这里我使用的是JSX来渲染元素,在JSX语法中,花括号被当成表达式(上述es6箭头函数的写法正常情况下是没有问题的)。我们应该做如下修改:

//把花括号去掉(es6箭头函数的写法:当回调函数只有一个语句时,可以省略花括号)
 {
    this.state.posts.map(item => 
        <PostItem 
          key={item.id}
          post={item}
          onVote={this.handleVote}
        />
    )
}

//或者保留花括号,使用return
{
 this.state.posts.map(item => 
        { return <PostItem 
          key={item.id}
          post={item}
          onVote={this.handleVote}
        />
        }
    )
}
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐