解决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的资料请关注脚本之家其它相关文章！
- 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 浮层组件（也称为弹出组件或弹窗组件）通常是指在用户界面上浮动显示的组件,本文主要介绍了浮层组件的实现方法,感兴趣的小伙伴可以了解下2024-02-02
react component changing uncontrolled in
这篇文章主要为大家介绍了react component changing uncontrolled input报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
详解create-react-app 自定义 eslint 配置
这篇文章主要介绍了详解create-react-app 自定义 eslint 配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要给大家介绍了关于React进阶之组件的解耦之道，文中通过详细的示例代码给大家介绍了组件分割与解耦的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
这篇文章主要为大家介绍了简化Cocos和Native交互利器详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
react中的useImperativeHandle()和forwardRef()用法
这篇文章主要介绍了react中的useImperativeHandle()和forwardRef()用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-03-03
解决React报错The tag is unrecognized in this browser
这篇文章主要为大家介绍了解决React报错The tag is unrecognized in this browser示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
本文介绍了如何模仿抖音发布页面,使用div元素作为输入框,并利用CSS样式和JavaScript动态操作DOM,实现类似于input输入框的功能,感兴趣的朋友跟随小编一起看看吧2024-10-10
这篇文章主要介绍了react中label标签for报错问题，解决办法就是react中label标签没有for属性，用htmlFor代替for属性,感兴趣的朋友跟随小编一起看看吧2022-02-02
最新评论