홈>
코드를 실행할 때 다음과 같은 경고가 나타납니다.
Line 48: Do not mutate state directly. Use setState() react/no-direct-mutation-state
이 경고는 다음 코드 줄을 나타냅니다 :
updateDelay(prediction_arr,prediction_dep) {
this.state.chartDataWake = [...this.state.chartDataWake, {wake: this.state.wake===84.73 ? "H" : (this.state.wake===14.78 ? "M" : "L"), delay: prediction_arr}];
this.state.chartDataTurnaround = [...this.state.chartDataTurnaround, {turnaround: this.state.schedTurnd, delay: prediction_arr}];
this.setState({
prediction_arr: prediction_arr,
prediction_dep: prediction_dep,
delay_arr_cat: prediction_arr===0 ? "<15" : (prediction_arr===1 ? "[15; 45]" : ">45")
});
};
this.setState({
안에 모든 선언을 넣어야한다는 것을 이해합니다
. 그러나 어떻게 정확하게 변경해야하는지 명확하지 않습니다
this.state.chartDataTurnaround = [...this.state.chartDataTurnaround, {turnaround: this.state.schedTurnd, delay: prediction_arr}];
코드를 컴파일하려면
- 답변 # 1
- 답변 # 2
this.state.YOUR_VARIABLE = something
를 사용하여 상태를 수정하지 마십시오원하는 스 니펫에서 본 경우, prevState를 새 상태로 복사하고 새 요소를 추가 할 수 있으려면 먼저 Object Cloning을 사용하여 이전 상태를 복사 한 다음이 복사본에 원하는 수의 요소를 추가해야합니다.
updateDelay(prediction_arr, prediction_dep) { const newChartDataWake = [...this.state.chartDataWake, { wake: this.state.wake === 84.73 ? "H" : (this.state.wake === 14.78 ? "M" : "L"), delay: prediction_arr }]; const newChartDataTurnaround = [...prevState.chartDataTurnaround, { turnaround: prevState.schedTurnd, delay: prediction_arr }] this.setState(prevState => { return { chartDataWake: newChartDataWake chartDataTurnaround: newChartDataTurnaround prediction_arr: prediction_arr, prediction_dep: prediction_dep, delay_arr_cat: prediction_arr === 0 ? "<15" : (prediction_arr === 1 ? "[15; 45]" : ">45") } }); };
- 답변 # 3
이전 상태를 인수로하는 setState에 대한 콜백을 사용해야합니다.
this.setState((prevState,props) => ({ chartDataWake:[...prevState.chartDataWake, {wake: prevState.wake===84.73 ? "H" : (prevState.wake===14.78 ? "M" : "L"), delay: prediction_arr}], chartDataTurnaround = [...prevState.chartDataTurnaround, {turnaround: prevState.schedTurnd, delay: prediction_arr}], prediction_arr: prediction_arr, prediction_dep: prediction_dep, delay_arr_cat: prediction_arr===0 ? "<15" : (prediction_arr===1 ? "[15; 45]" : ">45") })
관련 자료
- javascript - 방지 상태를 직접 변경하지 마십시오 setState () 사용
- javascript - Vuex 스토어에서 모듈 상태를 변경하지 않습니다 Vuex | Vue
- vue.js - vuex는 돌연변이 처리기 외부에서 vuex 저장 상태를 변경하지 않습니다
- javascript - 반응 setState는 상태를 업데이트하지 않습니다
- javascript - 사용자가 페이지를 직접 탐색 할 때 링크 할 기본 상태 전달
- javascript - redux-react store에서 여러 상태 항목을 변경하는 방법
- javascript - setState에서 [object Object]로 상태를 초기화하는 중
- javascript - setState ReactJs로 상태 업데이트
- reactjs - 다시 렌더링하지 않으려면 상태를 직접 변경해도 괜찮습니까?
- javascript - 업데이트 대기 상태가 아닌 setState 콜백
- reactjs - 반응 setState가 상태를 덮어 씁니다
- reactjs - 반응 상태의 배열 객체에서 State를 설정하는 방법은 무엇입니까?
- reactjs - react-native - react-native에서 statestate () 동적 상태를 설정하는 방법은 무엇입니까?
- reactjs - 상태를 즉시 업데이트하지 않는 SetState 반응
- reactjs - react setState에서 prevState를 직접 변경해도 괜찮습니까?
- javascript - for 루프 내부의 setState가 상태를 올바르게 업데이트하지 않습니다
- reactjs - 왜 setState는 원래 상태를 변경할 때만 업데이트됩니까?
- reactjs - 새 상태를 추가 할 때 setState가 업데이트되지 않습니다
관련 질문
- javascript : 새 데이터를 추가 할 때 localStorage에 prev.data를 유지하는 방법은 무엇입니까?
- javascript : react-router를 사용할 때 상태가 새로 고쳐지고 손실됩니까?
- javascript : Redux-react에서 StateLess 구성 요소와 작동하지 않는 연결
- javascript : 사용자가 텍스트 편집기에서 입력을 시작할 때만 상태를 업데이트하는 방법은 무엇입니까?
- javascript : Github 페이지 호스팅 사이트에 Twitch 비디오 삽입
- javascript : 반응 목록 구성 요소 발생시 변수
- javascript : 양식을 제출하기 위해 하나의 구성 요소 양식 입력 데이터를 부모 구성 요소에 보내는 방법
- javascript : api 호출의 첫 번째 응답이 null /undefined를 반환하지만 두 번째로 reactjs에서 올바른 응답을 받고 있습니다.
- javascript : 컴포넌트로드에서 반응 인라인 스타일 값을 변수로 전달
- javascript : React : Fetch API 호출에서 JSON 응답을 반환하려고 할 때 TypeError 받기
1- 상태를 직접 변경하지 말고 setState를 직접 사용하므로 처음 두 줄을 제거하십시오.
2-setState가 비동기이고 이전 값을 기반으로 상태를 업데이트하므로
updater function
를 사용하십시오. , setState에서 함수를 전달하고prevState
를 사용하는 것을 의미합니다. 해당 기능의 가치.이것처럼 :