react 순수 함수 구성 요소 setState 업데이트 페이지 가 새로 고침 되 지 않 는 해결

질문 설명:

const [textList, setTextList] = useState(   );
setTextList(   );

원 배열 을 수정 할 때 원 배열 이 심층 배열(한 층 이 아 닌)이 라면 setTextList 를 사용 하여 수정 할 때 페이지 새로 고침 을 촉발 하지 않 습 니 다.
원인 분석:
이것 은 가 변 대상 he 가 변 대상 과 관련 된 지식 입 니 다.vue 와 react 에서 가 변 대상 을 업데이트 할 때 보기 업 데 이 트 를 일 으 킬 수 있 습 니 다.이것 은 vue 와 react 는 기본적으로 얕 은 감청 이 고 데이터 의 1 층 만 감청 할 수 있 으 며 내부 데이터 가 바 뀌 어 감청 되 지 않 기 때 문 입 니 다.
해결 방안:
여기 서 제 해결 방안 은 먼저 원 배열 을 깊이 복사 하고 새 배열 에 값 을 부여 한 다음 에 새로운 배열 을 수정 하고 수 정 된 새 배열 을 전달 하 는 것 입 니 다.그러면 보기 업 데 이 트 를 일 으 킬 수 있 습 니 다.

var lists = textList.concat();
lists.splice(index, 1);
setTextList(lists);

추가:react 에서 hooks 갈고리 시 useState 가 렌 더 링 구성 요 소 를 업데이트 하지 않 는 문제

react 를 사용 하여 그림 구성 요 소 를 쓸 때 중요 한 문 제 를 발견 합 니 다.class 로 쓸 때 구성 요 소 를 통 해 렌 더 링 을 업데이트 하기 쉽 습 니 다.
함수 식 구성 요소 hooks 로 구성 요 소 를 재 구성 하기 로 결 정 했 을 때 어 려 운 문 제 를 발 견 했 습 니 다.onChange 를 통 해 부모 구성 요소 value 를 바 꾸 었 을 때 value 의 값 이 바 뀌 었 습 니 다.구성 요 소 를 다시 렌 더 링 하지 않 았 습 니까???
어리둥절 한 나 는 클 라 스 구성 요 소 를 먼저 value 를 빈 값 으로 설정 하려 고 했 습 니 다.-실 패 했 습 니 다.
그래서 갈고리 의 생명 주 기 를 통 해 한 번 보 려 고 했 습 니 다.실패했어
역시 바 이 두 죠-같은 문 제 를 발 견 했 습 니 다.발견 용
그래서 먼저 문 제 를 해결 하 는 태도 에 따라 그림 의 붉 은 동그라미 위 치 를 onChange(value.slice()로 바 꾸 었 다.
-그래서 이 신기 한 문 제 를 해결 했다.
지금 문제 가 해결 되 었 으 니 돌 이 켜 보면 도대체 어떻게 된 일 인지...
문 서 를 보 니 useState 의 데 이 터 는 immutable(할당 할 수 없 는 대상)이 어야 합 니 다.
즉,ass component 의 state 도 immutable 데 이 터 를 사용 하 는 것 을 권장 하지만 강제 적 인 것 은 아니다.setState 를 호출 하면 업 데 이 트 를 촉발 하기 때문이다.따라서 재 클 라 스 구성 요소 에 서 는 이러한 문제 가 발생 하지 않 았 거나 빈 값 으로 바 꾸 면 업 데 이 트 를 촉발 할 수 있 습 니 다.
그러나 useState 를 다시 사용 할 때 업데이트 함수 에 같은 대상 이 들 어 올 때 업 데 이 트 를 실행 할 수 없습니다.
그래서 해결 방향 은 바로 slice()를 통 해 새로운 대상 으로 돌아 가 값 을 부여 하 는 것 이 문 제 를 해결 하 는 관건 이다.
이상 은 react 순수 함수 구성 요소 setState 업데이트 페이지 가 새로 고침 되 지 않 는 해결 에 대한 상세 한 내용 입 니 다.react useState 페이지 가 새로 고침 되 지 않 는 자 료 는 다른 관련 글 을 주목 하 십시오!