홈>2020-02-26 13:28

javascript - 상태를 직접 변경하지 마십시오 setstate () 사용

코드를 실행할 때 다음과 같은 경고가 나타납니다.

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}];

코드를 컴파일하려면

javascriptreactjs

답변 # 1

1- 상태를 직접 변경하지 말고 setState를 직접 사용하므로 처음 두 줄을 제거하십시오.

2-setState가 비동기이고 이전 값을 기반으로 상태를 업데이트하므로 updater function 를 사용하십시오. , setState에서 함수를 전달하고 prevState 를 사용하는 것을 의미합니다. 해당 기능의 가치.

이것처럼 :

updateDelay(prediction_arr,prediction_dep) {
  this.setState(prevState => ({
    prediction_arr: prediction_arr,
    prediction_dep: prediction_dep,
    delay_arr_cat: prediction_arr===0 ? "<15" : (prediction_arr===1 ? "[15; 45]" : ">45"),
    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}
    ]
  }));
};

답변 # 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")
})

Python2.net

javascript - 상태를 직접 변경하지 마십시오 setstate () 사용

관련 자료