eslint：圍繞箭頭主體的意外塊語句

Question

我有一個反應組件，我收到一個錯誤 lint：

箭頭主體周圍出現意外的塊語句； 在=> arrow-body-style 之后立即移動返回值

export function dashConfig(config) {
  return (Component) => {
    return (props) => {
      const { data, isLoaded, error } = useDashConfig({ ...config });

      return <Component {...props} remoteConfig={{ data, isLoaded, error }} />;
    };
  };
}

我應該刪除哪個退貨？ 我不太明白解釋。 謝謝！

Answer 1

export function dashConfig(config) =>
  Component =>
    props => {
      const { data, isLoaded, error } = useDashConfig({ ...config });

      return <Component {...props} remoteConfig={{ data, isLoaded, error }} />;
    };
  };
}

Answer 2

您正在編寫一個箭頭 function 正文，該正文立即返回：

 function foo() { console.log("hello"); return () => { return () => { console.log("world"); } } } // Is the same as below function bar() { console.log("hello"); return () => () => { console.log("world"); } }; foo()()(); bar()()();

這適用於您自己的以下代碼：

export function dashConfig(config) {
  return (Component) => {
    return (props) => {
      const { data, isLoaded, error } = useDashConfig({ ...config });

      return <Component {...props} remoteConfig={{ data, isLoaded, error }} />;
    };
  };
}

// Is the same as this

export function dashConfig(config) {
  return (Component) => (props) => {
    const { data, isLoaded, error } = useDashConfig({ ...config });

    return <Component {...props} remoteConfig={{ data, isLoaded, error }} />;
  }
}

Answer 3

如果語句中只有一個return ，我們應該像下面的例子一樣去掉return 。

res => {
    return new Promise().resolve(null);
}

應該是這樣

res => (new Promise().resolve(null)); 

對於您的情況，它應該如下所示

export function dashConfig(config) =>
  Component =>
    props => {
      const { data, isLoaded, error } = useDashConfig({ ...config });
      return <Component {...props} remoteConfig={{ data, isLoaded, error }} />;
    };
  };
}