React报错之Expected an assignment or function react.js

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

文章图片

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

// App.jsconst 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 hello world; }; 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函数中的问题是一样的，我们忘记从函数中返回值。
显式返回 【React报错之Expected an assignment or function】为了解决该错误，我们必须显式地使用return语句或使用箭头函数隐式返回值。
下面是一个例子，用来说明如何使用显式return来解决这个错误。

const App = props => { const result = ['a', 'b', 'c'].map(el => { return el + '100'; // ? using explicit return }); console.log(result); return hello world; }; const mapStateToProps = state => { return {todos: ['walk the dog', 'buy groceries']}; // ? using explicit return }; export default App;

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

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

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

// ? implicit return const App = props => (hello world {['a', 'b', 'c'].map(element => ( {element} ))}); // ? 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语句）。