帶有條件的 React 中的 no-unused-expressions

Question

我有一個表單，需要先驗證一個 const，如果為真，則打開模態，如果為假，則提交表單。

我這樣做了，這行得通，但我得到了錯誤：

預期分配或 function 調用，而是看到一個表達式 @babel/no-unused-expressions

modalOpen = () => this.setState({ showModal: true });

const validateType = !someAttribute && hasChange;

const submit = () => {
    validateType ? this.modalOpen() : handleSubmit();
};

// Do I need to have this submit here too?
<Form className={cn} onSubmit={isReadOnly ? () => {} : handleSubmit} readOnly={isReadOnly}>

    <Button
        type="button"
        onClick={submit}
    />
</Form>

錯誤發生在此行：

validateType ? this.modalOpen() : handleSubmit();

我查看了文檔，我真的不明白為什么會發生這個錯誤。

如果有人能幫助我理解，我將不勝感激。

Answer 1

選項 1 - 用if/else替換三元：

const submit = () => {
  if(validateType) this.modalOpen(); 
  else handleSubmit();
};

選項 2 - 在.eslint文件中找到規則，然后更改為規則以允許三元表達式：

no-unused-expressions: ["error", { "allowTernary": true }]

選項 3 - 忽略此行的 eslint：

const submit = () => {
  // eslint-disable-next-line no-unused-expressions
  validateType ? this.modalOpen() : handleSubmit();
};