source

반응 후크/전체 딥을 글로벌하게 무시하도록 eslint 규칙을 구성하려면 어떻게 해야 합니까?

lovecheck 2023. 6. 21. 22:45
반응형

반응 후크/전체 딥을 글로벌하게 무시하도록 eslint 규칙을 구성하려면 어떻게 해야 합니까?

다음과 같은 useEffect 후크가 있는 반응 구성 요소가 있습니다.

const LocationEditor: React.FC<SectionEditorProps> = (props) => {
const [section, setSection] = useState({...(props.section as Location)});
useEffect(() => {
    props.onChange(section);
}, [section]);

프로젝트를 실행할 때 다음 경고가 표시됩니다.

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect  react-hooks/exhaustive-deps

그래서 저는 부품을 이렇게 바꾸려고 했습니다. 소품을 부수면서요.

const LocationEditor: React.FC<SectionEditorProps> = ({section, onClickCancel, onClickSave, onChange}) => {
    const [tmpSection, setSection] = useState({...(section as Location)});
    useEffect(() => {
        onChange(tmpSection);      
    }, [tmpSection]);

종속성 배열 앞에 이 설명을 추가하면 경고가 사라집니다.

// eslint-disable-next-line react-hooks/exhaustive-deps

그러나 아래 블록을 에 추가할 때eslintConfigpackage.json그것은 아무 것도 하지 않는 것 같습니다.

{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "off"
  }
}

몇몇 사람들이 사용하는 것에 대해 이야기하는 것을 봅니다..eslinrc파일입니다. 하지만 저는 당신이 전체적으로 규칙을 구성할 수 있다고 생각했습니다.package.json프로젝트에서 그 파일을 찾을 수 없습니다.

제가 놓친 게 있나요?

일반적으로 규칙을 사용하지 않도록 설정하지 않습니다.그러나 이를 비활성화할 가치가 있는 경우는 거의 없습니다.

예를 들어 마운트에서 가져오기를 수행할 때 다시 실행할 필요가 없는 경우 아래 코드를 사용하여 비활성화할 수 있습니다.

하지만 먼저 규칙이 틀리는지 확인하세요.규칙이 맞는지 지금인지 알아내려고 노력합니다. 여러 번 저는 규칙이 틀렸다고 생각했지만 제가 알아차리지 못한 버그를 가리켰습니다.

// eslint-disable-next-line react-hooks/exhaustive-deps

규칙을 전역적으로 비활성화할 수도 있지만 권장되지는 않습니다.

언급URL : https://stackoverflow.com/questions/65704653/how-do-i-configure-eslint-rules-to-ignore-react-hooks-exhaustive-deps-globally

반응형