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

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

原文链接：bobbyhadz.com/blog/react-…

以上就是解决React报错Expected an assignment or function call and instead saw an expression的详细内容，更多关于React报错assignment function的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 解决React报错Property does not exist on type 'JSX.IntrinsicElements'

    目录 总览 组件大写 类型声明 总结 总览 当组件名称以小写字母开头时,会导致"Property does not exist on type 'JSX.IntrinsicElements'"错误.为了解决该错误,确保组件名称总是以大写字母开头,安装React声明文件并重启你的开发服务器. 这里有个示例用来展示错误是如何发生的. // App.tsx // ️ name starts with lowercase letter function myComponent() { retu

  • 解决React报错Rendered more hooks than during the previous render

    目录 总览 顶层调用 条件之上 总览 当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时,会产生"Rendered more hooks than during the previous render"错误.为了解决该错误,将所有的钩子移到函数组件的顶层,以及不要在条件中使用钩子. 这里有个示例用来展示错误是如何发生的. // App.js import {useEffect, useState} from 'react'; export default function App

  • React Hook 'useEffect' is called in function报错解决

    目录 总览 声明组件 声明自定义钩子 总结 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function",可以将函数名的第一个字母大写,或者使用use作为函数名的前缀.比如说,useCounter使其成为一个组件或一个自定义钩子. 这里有个示例用来展示错误是如何发生的. // App.j

  • 解决React报错You provided a `checked` prop to a form field

    目录 总览 defaultChecked onChange 初始值 总览 当我们在多选框上设置了checked 属性,却没有onChange 处理函数时,会产生"You provided a checked prop to a form field without an onChange handler"错误.为了解决该错误,可以使用defaultChecked 属性,或者在表单字段上设置onChange 属性. 这里有个例子用来展示错误是如何发生的. // App.js export

  • 解决React hook 'useState' cannot be called in a class component报错

    目录 总览 函数组件 类组件中使用setState() 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class component"错误.为了解决该错误,请将类组件转换为函数组件.因为钩子不能在类组件中使用. 这里有个例子用来展示错误是如何发生的. // App.js import {useState, useEffect} from 'react'; class Example

  • React hook 'useState' is called conditionally报错解决

    目录 总览 顶层调用 总览 当我们有条件地使用useState钩子时,或者在一个可能有返回值的条件之后,会产生"React hook 'useState' is called conditionally"错误.为了解决该错误,将所有React钩子移到任何可能油返回值的条件之上. 这里有个例子用来展示错误是如何发生的. import React, {useState} from 'react'; export default function App() { const [count,

  • 解决React报错Parameter 'props' implicitly has an 'any' type

    目录 总览 安装类型文件 声明类型 泛型 重新安装 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an 'any' type"错误.为了解决这个错误,在你的组件中明确地为props对象设置一个类型. 安装类型文件 你首先要确定的是你已经安装了React类型声明文件.在项目的根目录下打开终端,并运行以下命令. # ️ with NPM npm install --s

  • 解决React报错Invalid hook call

    目录 总览 版本匹配 调用组件 总览 导致"Invalid hook call. Hooks can only be called inside the body of a function component"错误的有多种原因: react和react-dom的版本不匹配. 在一个项目中有多个react包版本. 试图将一个组件作为一个函数来调用,例如,App()而不是<App />. 在类里面使用钩子,或者在不是组件或自定义钩子的函数中使用钩子. 版本匹配 在项目的根目录

  • 解决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报错信息之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报错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报错useNavigate() may be used only in context of Router

    目录 总览 useNavigate Jest replace 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时,会产生"useNavigate() may be used only in the context of a Router component"警告.为了解决该问题,只在Router上下文中使用useNavigate 钩子. 下面是一个在index.js文件中将React应用包裹到Router中的例子. // index.j

  • 解决React报错Style prop value must be an object

    目录 总览 映射 提取 总览 在React中,当我们为元素的style 属性传递字符串时,会产生"Style prop value must be an object"警告.为了解决该警告,使用从属性到值的映射.比如说,style={{paddingLeft: '15px'}} . 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Style prop value must be an object eslint(reac

  • 解决React报错The tag is unrecognized in this browser

    目录 总览 确保标签存在 小写字母开头 总览 当我们使用一个在浏览器中不存在的标签或以小写字母开头的组件名称时,会产生"The tag is unrecognized in this browser"React警告.为了解决该问题,只使用有效的标签名称,并将你的组件的第一个字母大写. 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Warning: The tag <p1> is unrecognized i

  • 解决React报错Cannot assign to 'current' because it is a read-only property

    目录 总览 正确的泛型 DOM元素 总览 当我们用一个null值初始化一个ref,但在其类型中不包括null时,就会发生"Cannot assign to 'current' because it is a read-only property"错误.为了解决该错误,请在ref的类型中包含null.比如说,const ref = useRef<string | null>(null) . 这里有个例子来展示错误是如何发生的. // App.tsx import {useEf

  • 解决React报错Functions are not valid as a React child

    目录 总览 调用函数 总结 总览 产生"Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render."错误 通常是因为以下两个原因: 从render中返回一个函数引用而不是一个组件. 使用 react router 路由作为<Route path="/about" el

  • 解决React报错Unexpected default export of anonymous function

    目录 总览 命名 注释单行规则 总结 总览 当我们尝试使用默认导出来导出一个匿名函数时,会导致"Unexpected default export of anonymous function"警告.为了解决该错误,在导出函数之前,为函数赋予一个名称. 这里有个例子来展示警告是如何发生的. // Header.js // ️ default export for anonymous function // ️ Unexpected default export of anonymous

随机推荐