React报错信息之Expected an assignment or function call and instead saw an expression

 更新时间:2022年08月20日 09:18:51   作者:chuckQu  
这篇文章主要介绍了React报错之Expected an assignment or function call and instead saw an expression,下面有两个示例来展示错误是如何产生的,需要的朋友可以参考下

正文从这开始~

总览

当我们忘记从函数中返回值时,会产生"Expected an assignment or function call and instead saw an expression"错误。为了解决该错误,确保显式地使用return语句或使用箭头函数隐式返回。

下面有两个示例来展示错误是如何产生的。

// App.js

const App = props => {
  const result = ['a', 'b', 'c'].map(el => {
    // ⛔️ Expected an assignment or function call and instead saw an expression. eslint no-unused-expressions
    el + '100';
  });

  return <div>hello world</div>;
};

const mapStateToProps = (state) => {
  // ⛔️ Expected an assignment or function call and instead saw an expression. eslint no-unused-expressions
  todos: ['walk the dog', 'buy groceries']
}

export default App;

App组件中,错误是在Array.map()方法中引起的。这里的问题在于,我们没有从传递给map()方法的回调函数中返回任意值。

在JavaScript函数中,如果我们没有显式地使用return语句,或者使用箭头函数隐式地返回一个值,则返回undefined

mapStateToProps函数中的问题是一样的,我们忘记从函数中返回值。

显式返回

为了解决该错误,我们必须显式地使用return语句或使用箭头函数隐式返回值。

下面是一个例子,用来说明如何使用显式return来解决这个错误。

const App = props => {
  const result = ['a', 'b', 'c'].map(el => {
    return el + '100'; // 👈️ using explicit return
  });

  console.log(result);

  return <div>hello world</div>;
};

const mapStateToProps = state => {
  return {todos: ['walk the dog', 'buy groceries']}; // 👈️ using explicit return
};

export default App;

我们通过在map()方法中显式返回来解决问题。这是必须的,因为Array.map方法返回一个数组,其中包含我们传递给它的回调函数所返回的所有值。

需要注意的是,当你从一个嵌套函数中返回时,你并没有同时从外层函数中返回。

隐式返回

另一种方法是使用箭头函数的隐式返回。

// 👇️ implicit return
const App = props => (
  <div>
    <h2>hello</h2>
    <h2>world</h2>
    {['a', 'b', 'c'].map(element => (
      <div key={element}>{element}</div>
    ))}
  </div>
);

// 👇️ implicit return
const result = ['a', 'b', 'c'].map(element => element + '100');
console.log(result); // 👉️ ['a100', 'b100', 'c100']

// 👇️ implicit return
const mapStateToProps = state => ({
  todos: ['walk the dog', 'buy groceries'],
});

export default App;

我们为App组件使用了隐式地箭头函数返回。

需要注意的是,我们根本没有使用大括号。简短的隐式返回使用圆括号。

返回对象

如果我们使用隐式返回来返回一个对象,我们必须用圆括号来包裹这个对象。

// ✅ RIGHT
const mapStateToProps = state => ({
  todos: ['walk the dog', 'buy groceries'],
});

// ⛔️ WRONG
const msp = state => {
  // ⛔️ Expected an assignment or function call and instead saw an expression.eslint no-unused-expressions
  todos: ['walk the dog', 'buy groceries']
};

一个简单的思考方式是--当你使用大括号而没有用圆括号包裹它们时,你是在声明一个代码块(比如if语句)。

{
  console.log('this is my block of code');
}

当不使用圆括号时,你有一个代码块,而不是一个对象。

但当你用圆括号包裹住大括号时,你就有一个隐式的箭头函数返回。

如果你认为eslint规则不应该在你的方案中造成错误,你可以通过使用注释来关闭某一行的eslint规则。

// eslint-disable-next-line no-unused-expressions

注释应该放在造成错误的那一行的正上方。

到此这篇关于React报错之Expected an assignment or function call and instead saw an expression的文章就介绍到这了,更多相关React报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ChatGLM 集成LangChain工具详解

    ChatGLM 集成LangChain工具详解

    这篇文章主要为大家介绍了Svelte和React框架使用比较,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • React18新增特性介绍

    React18新增特性介绍

    react历次版本迭代主要想解决的是两类导致网页卡顿的问题,分别是cpu密集型任务和io密集型任务导致的卡顿问题,react18新增特性就是为了解决上述问题
    2022-09-09
  • react国际化化插件react-i18n-auto使用详解

    react国际化化插件react-i18n-auto使用详解

    这篇文章主要介绍了react国际化化插件react-i18n-auto使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • react的严格模式和解决react useEffect执行两次问题

    react的严格模式和解决react useEffect执行两次问题

    文章总结:本文详细探讨了React中useEffect执行两次的问题,主要归因于React的严格模式,严格模式在开发模式下会故意重复调用一些生命周期方法,以帮助开发者发现潜在的问题,包括不安全的生命周期、过时的ref API、废弃的findDOMNode方法、意外的副作用等
    2025-01-01
  • Jira 任务管理系统项目总结讲解

    Jira 任务管理系统项目总结讲解

    这篇文章主要为大家介绍了Jira 任务管理系统项目总结讲解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 如何将你的AngularJS1.x应用迁移至React的方法

    如何将你的AngularJS1.x应用迁移至React的方法

    本篇文章主要介绍了如何将你的AngularJS1.x应用迁移至React的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • React组件的创建与state同步异步详解

    React组件的创建与state同步异步详解

    这篇文章主要介绍了react组件实例属性state,有状态state的组件称作复杂组件,没有状态的组件称为简单组件,状态里存储数据,数据的改变驱动页面的展示,本文结合实例代码给大家详细讲解,需要的朋友可以参考下
    2023-03-03
  • React18+TS通用后台管理系统解决方案落地实战示例

    React18+TS通用后台管理系统解决方案落地实战示例

    这篇文章主要为大家介绍了React18+TS通用后台管理系统解决方案落地实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • React实现生成和导出Word文档的方法详解

    React实现生成和导出Word文档的方法详解

    React是一个流行的JavaScript库,用于构建现代前端应用程序,本文将深入探讨如何在React中生成和导出Word文档,感兴趣的小伙伴可以学习一下
    2023-09-09
  • redux功能强大的Middleware中间件使用学习

    redux功能强大的Middleware中间件使用学习

    这篇文章主要为大家介绍了redux功能强大的Middleware中间件使用学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论