eslint：围绕箭头主体的意外块语句

Question

我有一个组件在反应，我收到一个错误 lint：

箭头主体周围出现意外的块语句；在 => arrow-body-style

之后立即移动 returned 值

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

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

我应该删除哪个 return？我不太明白解释。谢谢！

Answer 1

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

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

Answer 2

您正在编写一个箭头函数体，它立即 returns:

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

eslint：围绕箭头主体的意外块语句

eslint: Unexpected block statement surrounding arrow body

javascript

lint

reactjs