记一个 react 程序报的错误:Expected an assignment or function call and instead saw an expression,直译是:需要是一个函数调用或赋值,不过却是一个表达式。

  这个错误让我摸不着头脑,反复看代码也没发现哪出问题了,最后在看到这篇文章的时候才发现是哪错了(箭头函数里的括号问题)。这里记录一下来加深印象,也给出现同样问题的朋友们提供一个案例。

  其实主要也是自己基础不扎实的问题

  在我对箭头函数的印象中:若箭头函数的函数体中只有一条语句,那么此时可以不用加(可选)括号 {} / (),且默认会加上 return,而若有多行的话,需要使用 {} 包裹且需要加上 return 关键字。

  不过要注意的是,如果箭头函数的函数体中只有一条语句的,且我们选择加上了括号 {} ,那么需要加上 return 关键字,其实是加上了 {} 的箭头函数体都必须加上 return,否则默认会返回 undefined

  我程序中出现的错误就是一条语句的箭头函数中加上了 {} 却没加 return

也就是:

// 注意,这边错了!
children: children.map(child => {
    typeof child === 'object'
        ? child
        : createTextElement(child)
})

正确的写法应该是:

children: children.map(child => {
    retrun typeof child === 'object'
        ? child
        : createTextElement(child);
})

// 或者直接不加括号,或者加的是 () 
children.map(child => 
    typeof child === 'object'
        ? child
        : createTextElement(child);
)
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐