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报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • react项目升级报错,babel报错,.babelrc配置兼容等问题及解决

    目录 react项目升级报错,babel报错,.babelrc配置兼容问题 遇到问题 最终解决方案 react运行报错TypeError 现记录一下思路 react项目升级报错,babel报错,.babelrc配置兼容问题 由于开发环境和项目版本的兼容问题,尝试升级了react-scripts后,一大堆问题接踵而至,翻遍了百度和csdn,往往解决了旧的又出现新的,或者开发没问题而打包时报错,现罗列一下遇到的主要问题和最终解决方案,以供参考. 遇到问题 digital envelope routi

  • React报错解决之ref返回undefined或null

    目录 总览 useEffect 事件 总结 总览 当我们试图在其对应的DOM元素被渲染之前访问其current属性时,React的ref通常会返回undefined或者null.为了解决该问题,可以在useEffect钩子中访问ref,或者当事件触发时再访问ref. import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(); console.log(ref.curre

  • 解决react中label标签for报错问题

    解决react中label标签for报错问题

    要求:点击账号或密码,自动将焦点转到相关的表单控件(input)上. 问题:功能可以使用,但是会有报错. 解决办法:react中label标签没有for属性,用htmlFor代替for属性 demo的代码: 报错 修改后的代码 到此这篇关于react中label标签for报错的文章就介绍到这了,更多相关react中label标签内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • npx create-react-app xxx创建项目报错的解决办法

    手头有一台大学时代的Windows电脑,它此前没有装过create-react-app,只装了node环境.版本信息:node -> 10.16.3,npm -> 6.9.0.前几日闲的无事想给它装个React,结果失败了,报了错,所以有了下面这出. 安装过程 根据React官方文档(上图)可以发现,此时并不需要安装create-react-app工具,只要你的node >= 8.10 && npm >= 5.6,就可以直接使用npx create-react-ap

  • React报错之组件不能作为JSX组件使用的解决方法

    目录 总览 返回单个JSX元素 不要忘记返回值 更新React类型声明 总览 组件不能作为JSX组件使用,出现该错误有多个原因: 返回JSX元素数组,而不是单个元素. 从组件中返回JSX元素或者null以外的任何值. 使用过时的React类型声明. 返回单个JSX元素 下面是一个错误如何发生的示例. // App.tsx // ️ 'App' cannot be used as a JSX component. // Its return type 'Element[]' is not a va

  • React报错之Object is possibly null的问题及解决方法

    React报错之Object is possibly null的问题及解决方法

    目录 类型守卫 非空断言 总结 类型守卫 使用类型守卫来解决React中useRef钩子“Object is possibly null”的错误.比如说,if (inputRef.current) {} .一旦null被排除在ref的类型之外,我们就能够访问ref上的属性. 下面是一个错误如何发生的示例. import {useEffect, useRef} from 'react'; export default function App() { const inputRef = useRef

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

    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', '

  • 解决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

  • 解决React报错React.Children.only expected to receive single React element child

    目录 总览 React片段 DOM元素 总览 当我们把多个子元素传递给一个只期望有一个React子元素的组件时,会产生"React.Children.only expected to receive single React element child"错误.为了解决该错误,将所有元素包装在一个React片段或一个封闭div中. 这里有个示例来展示错误是如何发生的. // App.js import React from 'react'; function Button(props)

  • 解决React报错Property 'X' does not exist on type 'HTMLElement'

    目录 总览 类型断言 总结 总览 在React中,当我们试图访问类型为HTMLElement 的元素上不存在的属性时,就会发生Property 'X' does not exist on type 'HTMLElement'错误.为了解决该错误,在访问属性之前,使用类型断言来正确地类型声明元素. 这里有三个例子来展示错误是如何发生的. // App.tsx import {useEffect} from 'react'; export default function App() { useEf

  • 解决nginx报错信息 client intended to send too large body: 1331696 bytes

    解决nginx报错信息 client intended to send too large body: 1331696 bytes 1,nginx后台error日志报错 2016/02/05 16:23:56 [error] 12024#0: *441106971 connect() failed (111: Connection refused) while connecting to upstream, client: 113.214.1.10, server: localhost, req

  • bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法

    bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法

    日期插件 bootstrap-datetimepicker 在火狐下出现一条报错信息:TypeError: (intermediate value).toString(-).split(-)[1] is undefined 这条错误必然出现,难道没有在 Firefox 下进行测试. 在 Firefox 下查看项目 demo (http://www.malot.fr/bootstrap-datetimepicker/demo.php)可以正常运行,但这个 demo.php 使用的是 2013-3-

  • Ubuntu下开启php调试模式报错信息解决办法

    Ubuntu下开启php调试模式报错信息解决办法 在Ubuntu下php的缺省设置是不显示错误信息的,如果程序出错会显示"无法处理此请求的错误提示",这在开发环境下非常不方便. 其实我们只要编辑下apache的配置文件就好 1.我的apache 配置文件目录是/etc/apache2/apache2.conf sudo vim /etc/apache2/apache2.conf 再最后加入以下两行 php_flag display_errors on php_value error_r

  • 解决Unixbench安装报错信息的问题

    运行环境: Ubuntu 16.04.3 x86_64 在Ubuntu下安装运行Unixbench时,提示报错信息如下 gcc -o ./pgms/ubgears -DTIME -Wall -pedantic -ansi -O2 -fomit-frame-pointer -fforce-addr -ffast-math -Wall ./src/ubgears.c -lGL -lXext -lX11 /usr/bin/ld: /tmp/ccnTgDEZ.o: undefined reference

  • 基于Django实现日志记录报错信息

    这篇文章主要介绍了基于Django实现日志记录报错信息,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 当服务器500错误的时候,普通日志只会记录一行500的request信息,并不会记录详细的报错定位 [ERROR] 2019-06-12 15:07:03,597 "GET /api/v1/test/ HTTP/1.1" 500 74196 需要添加一个在日志中记录详细错误信息的middleware # -*- coding: UTF

随机推荐