如何修复 eslint 警告 JSX 属性值不应包含在同一 scope react-perf/jsx-no-new-function-as-prop 中创建的函数

Question

我是编程和学习 typescript 的新手，我一直在尝试理解和修复 eslint 警告。 我有如下代码，

const handleRequestDelete = async () => { //eslint warning
    try {
        await deleteSomething({ variables: { ids }});
  
        onSuccess();
    } catch (error) {
        const [{ status, title, description }] =
        apolloErrorToNotifications(error);
        onError(error);
        throw error;
    }
};

在线 const handleRequestDelete 它会像这样抛出 eslint 警告。

warning  JSX attribute values should not contain functions created in the same scope  react-perf/jsx-no-new-function-as-prop

我该如何解决这个错误。 有人可以帮助我吗？ 谢谢。

Answer 1

该 lint 规则指出，将在每次渲染时创建新的handleRequestDelete 。 为了满足 lint 规则，您需要将 function 包装在useCallback中：

const handleRequestDelete = useCallback(
  async () => {
    try {
      await deleteSomething({ variables: { ids } });

      onSuccess();
    } catch (error) {
      const [{ status, title, description }] =
        apolloErrorToNotifications(error);
      onError(error);
      throw error;
    }
  },
  [/* insert dependencies here */]
);

通过这样做，只要依赖数组不改变，您将在每次渲染时重用相同的 function。 我不确定依赖数组需要包含什么，但我的猜测是[deleteSomething, onSuccess, apolloErrorToNotifications, onError]

如果您觉得这条 lint 规则没有用，您可以在.eslint.json文件中禁用它，方法是将其添加到规则部分：

"rules": {
  "react-perf/jsx-no-new-function-as-prop": "off"
}