(React) 期望一个赋值或函数调用，而不是一个表达式

作者

(React) 期望一个赋值或函数调用，而不是一个表达式

(React) Expected an assignment or function call and instead saw an expression

当我们忘记从函数返回一个值时，就会出现 React.js 错误“Expected an assignment or function call and instead saw an expression”。

要解决错误，请确保显式使用return语句或使用箭头函数隐式返回。

反应预期的分配或函数调用

以下是错误发生方式的 2 个示例。

应用程序.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()方法的回调函数中返回任何内容。

我们不显式使用return 语句或使用箭头函数 return 隐式返回值的JavaScript 函数。 undefined

函数中的问题mapStateToProps是相同的——我们忘记从函数返回一个值。

使用显式返回解决错误

要解决错误，我们必须使用显式return语句或使用箭头函数隐式返回值。

下面是一个如何使用显式return.

应用程序.js
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()
方法返回一个数组，其中包含从我们传递给它的回调函数返回的所有值。

请注意，当您从嵌套函数返回时，您不会同时从外部函数返回。

使用隐式返回解决错误

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

应用程序.js
// 👇️ 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。

请注意，我们根本没有使用大括号。速记隐式返回使用括号。

如果我们使用隐式返回来返回一个对象，我们必须将对象括在括号中。

应用程序.js
// ✅ 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
）。

应用程序.js
{
  console.log('this is my block of code');
}

当不带括号使用时，你有一个代码块，而不是一个对象。

但是当你将花括号括在圆括号中时，你有一个隐含的箭头函数返回。

如果您认为 Eslint 规则不应该显示错误，您可以使用注释将其关闭一行。

应用程序.js
// eslint-disable-next-line no-unused-expressions

注释应该放在导致错误的行的正上方。