Приложение React не может скомпилироваться, если компонент имеет IIFE

#javascript #reactjs #eslint

Вопрос:

Ниже приведен мой код компонента.

 function App() {
  !function() {
    console.log("foo")
  }()

  return (
    <div>APP</div>
  )
}

export default App
 

Я получил ошибку компиляции при сборке.

 Creating an optimized production build...
Failed to compile.

srcApp.js
  Line 2:3:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
 

Я не понимаю, почему я получаю ошибку компиляции.
Это допустимый код JavaScript.

Могу ли я игнорировать эту ошибку?


На самом деле, я использую его для использования асинхронной функции в useEffect.

 useEffect(() => {
    !async function() {
        await something()
    }()
})
 

Комментарии:

1. что такое !function ?

2. Это ошибка линтинга , eslint.org/docs/rules/no-unused-expressions . В этом случае ваша ЖИЗНЬ в любом случае бессмысленна.

3. Я бы даже спросил: чего вы пытаетесь достичь, вызывая функцию таким образом

4. @AlexShtromberg, может быть, область видимости переменной?

5. @andymccullough Это для того, чтобы создать свою жизнь. Обычно вы используете фигурные скобки: (()=>{})() но это не ЕДИНСТВЕННЫЙ способ создать IIFE. Все, чем является IIFE, — это ВЫРАЖЕНИЕ функции ( E в IIFE), которое немедленно вызывается. Вы можете создавать выражения с помощью () или с помощью любых математических операторов, таких как ! или или - и т.д., Или помещая свою функцию справа от = знака, например: и т.д. _ = ()=>{}()

Ответ №1:

можешь попробовать это.

 function App() {
  true amp;amp; function() {
    console.log("foo")
  }()
 return !function(){console.log("poo")}
  return (
    <div>APP</div>
  )
}
 

https://web.archive.org/web/20171201033208/http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife

Ответ №2:

Унарный оператор IIFE хорошо работает со стилями без полу, поэтому я, наконец, решил эту проблему, изменив eslintConfig.

 "rules": {
  "no-unused-expressions": "off"
}