快捷導(dǎo)航

解決React報(bào)錯(cuò)Expected an assignment or function call and instead saw an expression

更新時(shí)間：2022年12月02日 10:35:54 作者：Borislav Hadzhiev

這篇文章主要為大家介紹了React報(bào)錯(cuò)Expected an assignment or function call and instead saw an expression解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

當(dāng)我們忘記從函數(shù)中返回值時(shí)，會(huì)產(chǎn)生"Expected an assignment or function call and instead saw an expression"錯(cuò)誤。為了解決該錯(cuò)誤，確保顯式地使用return語(yǔ)句或使用箭頭函數(shù)隱式返回。

下面有兩個(gè)示例來(lái)展示錯(cuò)誤是如何產(chǎn)生的。

// 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組件中，錯(cuò)誤是在Array.map()方法中引起的。這里的問(wèn)題在于，我們沒(méi)有從傳遞給map()方法的回調(diào)函數(shù)中返回任意值。

在JavaScript函數(shù)中，如果我們沒(méi)有顯式地使用return語(yǔ)句，或者使用箭頭函數(shù)隱式地返回一個(gè)值，則返回undefined。

mapStateToProps函數(shù)中的問(wèn)題是一樣的，我們忘記從函數(shù)中返回值。

顯式返回

為了解決該錯(cuò)誤，我們必須顯式地使用return語(yǔ)句或使用箭頭函數(shù)隱式返回值。

下面是一個(gè)例子，用來(lái)說(shuō)明如何使用顯式return來(lái)解決這個(gè)錯(cuò)誤。

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;

我們通過(guò)在map()方法中顯式返回來(lái)解決問(wèn)題。這是必須的，因?yàn)?code>Array.map方法返回一個(gè)數(shù)組，其中包含我們傳遞給它的回調(diào)函數(shù)所返回的所有值。

需要注意的是，當(dāng)你從一個(gè)嵌套函數(shù)中返回時(shí)，你并沒(méi)有同時(shí)從外層函數(shù)中返回。

隱式返回

另一種方法是使用箭頭函數(shù)的隱式返回。

// ??? 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;

我們?yōu)?code>App組件使用了隱式地箭頭函數(shù)返回。

需要注意的是，我們根本沒(méi)有使用大括號(hào)。簡(jiǎn)短的隱式返回使用圓括號(hào)。

返回對(duì)象

如果我們使用隱式返回來(lái)返回一個(gè)對(duì)象，我們必須用圓括號(hào)來(lái)包裹這個(gè)對(duì)象。

// ? 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']
};

一個(gè)簡(jiǎn)單的思考方式是--當(dāng)你使用大括號(hào)而沒(méi)有用圓括號(hào)包裹它們時(shí)，你是在聲明一個(gè)代碼塊（比如if語(yǔ)句）。

{
  console.log('this is my block of code');
}

當(dāng)不使用圓括號(hào)時(shí)，你有一個(gè)代碼塊，而不是一個(gè)對(duì)象。

但當(dāng)你用圓括號(hào)包裹住大括號(hào)時(shí)，你就有一個(gè)隱式的箭頭函數(shù)返回。

如果你認(rèn)為eslint規(guī)則不應(yīng)該在你的方案中造成錯(cuò)誤，你可以通過(guò)使用注釋來(lái)關(guān)閉某一行的eslint規(guī)則。

// eslint-disable-next-line no-unused-expressions

注釋應(yīng)該放在造成錯(cuò)誤的那一行的正上方。

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

以上就是解決React報(bào)錯(cuò)Expected an assignment or function call and instead saw an expression的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)assignment function的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: