반응 배열 변경 사항이 업데이트되지 않은 경우 수행할 작업

JS의 배열 할당이 참조로 전달되기 때문에 React 배열 변경 사항이 업데이트되지 않습니다. 해결 방법은 다음과 같습니다. 1. 해당 반응 파일을 엽니다. 2. 스프레드 연산자를 사용하여 새 배열을 만들고 메모리 참조를 변경합니다. 값을 다시 할당하려면 "panes.push({key: panels.length,tab: `${panes.length + 1}`})"를 사용하세요.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응 배열이 변경되었으나 업데이트되지 않으면 어떻게 해야 하나요?

React에서 상태 배열 요소의 속성이 변경되면 setState 페이지가 업데이트되지 않습니다.

코드를 작성하는 과정에서 push 등의 방법을 직접 사용하여 상태를 논리적으로 변경하면 알 수 있습니다. 말하자면, push는 원래 배열을 변경하지만 업데이트되어야 하지만 렌더링된 상태는 변경되지 않습니다.

오늘 제가 겪은 문제는 컴포넌트의 배열 요소를 수정한 후 데이터가 변경되었으나 페이지가 다시 렌더링되지 않는다는 것입니다.

이것은 컴포넌트가 배열의 변경 사항을 인식하지 못해서 발생한다고 합니다. 페이지가 다시 렌더링되지 않습니다

그러므로 구성요소를 그대로 두면 변경된 것을 감지하면 새로 고침 효과를 얻을 수 있습니다.

이유:

이는 js에서 배열 할당이 참조로 전달되기 때문입니다. array.push는 배열에 해당하는 메모리 블록을 직접 변경하는 것과 동일하지만, React 내에서 비교에 사용되는 배열의 메모리는 변경되지 않고 동일한 메모리를 가리키는 SetState만 수행하므로 다시 렌더링되지 않습니다. 트리거되었습니다.

확산 연산자를 사용하여 새 배열을 만들고 메모리 참조를 변경할 수 있습니다.

요구 사항:

해결책: 구조 분해 후 재할당

const onClick = (key) => {// tab点击函数
    if (key === 'addTab') {
      panes.push({
        key: panes.length,
        tab: `筛选记录${panes.length + 1}`
      })
      setPanes([...panes])
    }
  }

권장 학습: "react 비디오 튜토리얼"

위 내용은 반응 배열 변경 사항이 업데이트되지 않은 경우 수행할 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!