>

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

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

    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")
    })
    
    

  • 이전 bash - 일부 명령 후 프롬프트가 엉킴 (f/e curl elasticsearch)
  • 다음 react native - CRNA, genymotion, expo 이상한 오류