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报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
- node.js使用express-jwt报错:expressJWT is not a function解决
- 解决React报错Expected an assignment or function call and instead saw an expression
- MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
- 解决三元运算符 报错“SyntaxError: can''''t assign to conditional expression”
- 解决大于5.7版本mysql的分组报错Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated
- Express无法通过req.body获取请求传递的数据解决方法
- express框架,报错:“Cannot set headers after they are sent to the client”,解决方法总结
相关文章
React Hooks - useContetx和useReducer的使用实例详解
这篇文章主要介绍了React Hooks - useContetx和useReducer的基本使用,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-11-11
最新评论