반응 경고 최대 업데이트 깊이를 초과했습니다.

반응 경고 최대 업데이트 깊이를 초과했습니다.

이 질문은 제 문제에 가장 가까운 질문의 후속 질문입니다.

무한 루프 인 useEffect

저는 라이브러리를 공부하기 위해 작은 React.js 앱을 만들고 있습니다.경고 메시지가 떴습니다.

최대 업데이트 깊이를 초과했습니다.이 문제는 컴포넌트가 setState inside useEffect를 호출하지만 useEffect에 종속성 배열이 없거나 모든 렌더에서 종속성 중 하나가 변경되었을 때 발생할 수 있습니다.

기능적인 컴포넌트를 입수했습니다.이 컴포넌트에는 다음과 같은 코드가 있습니다.

const propertiesMap2 = new Map([  //There is also propertiesMap1 which has the same structure
["TITLE4",
    {
        propertyValues: {
            myProperty10 : "myVal1",
            myProperty11 : "myVal2",
            myProperty12 : "myVal3",                                                            
        },
        isOpen: true
    }
],
["TITLE5",
    {
        propertyValues: {
            myProperty13 : "myVal4",
            myProperty14 : "myVal5",
            myProperty15 : "myVal6",                                                             
        },
        isOpen: true
    }
],
["TITLE6",
    {
        propertyValues:{
            myProperty16 : "myVal7",
            myProperty17 : "myVal8",
            myProperty18 : "myVal9",
        },
        isOpen: true
    }                                                        
]
]);

const [properties, setPropertiesMapFunc] = useState(new Map());
useEffect(()=>
{
    let mapNum = Number(props.match.params.id);
    setPropertiesMapFunc(mapNum === 1 ?propertiesMap1 : propertiesMap2);
}, [properties]);

매번 올바른 속성 맵이 선택되지만 앞서 말했듯이 이 오류가 발생합니다.내가 왜 알 수 있지?propertiesMap아무것도 변하지 않고 일정합니다.properties에 파라미터로 전달되었습니다.setEffect그래서 거기서 뭔가 바뀌었을 때만 다시 렌더링 되는 줄 알았어요.

컴포넌트 함수 내부에 맵개체를 작성하기 때문에 모든 렌더에서 맵개체가 다시 작성됩니다.그 때문에, 이펙트는 새로운 맵을 새로운 상태로 설정해, 또 다른 리렌더를 트리거 해, 이펙트를 다시 호출해, 무한 갱신 루프를 발생시킵니다.

맵 객체의 정의를 컴포넌트 외부로 이동하여 수정할 수 있습니다.

properties는 맵이며 의존관계 배열로 전달되었을 때useEffectJS의 다른 비프라이머리 타입과 같은 맵은 값이 아닌 참조로 비교되기 때문에 모든 렌더에서 다시 작성됩니다.이 때문에 내부 기능이 발생합니다.useEffect모든 재시동마다 실행되어야 합니다.

상세 비교 기능으로 정리해야 합니다.https://stackoverflow.com/a/54096391/4468021

언급URL : https://stackoverflow.com/questions/57853288/react-warning-maximum-update-depth-exceeded