jsx 내부에서 forceUpdate 호출하기

Question

this 표기법이 좋지 않아서 jsx 내부에서 forceUpdate() 메서드를 호출 할 때 몇 가지 문제가 있습니다.

//some code 


    return(
     <tr key={id}> 
      <td> 
       <div>{name}</div> 
       <h4 onClick={() => { 
        var toChange = JSON.parse(localStorage.nameForData); 
        for(var i in toChange){ 
         if(toChange[i].city.id = id){ 
          toChange.splice(i,1); 
         } 
        } 
        localStorage.nameForData = JSON.stringify(toChange); 
        forceUpdate(); 

       }} >Delete</h4> 
      </td> 
      <td><Chart data={temps} color='orange' units='K' /></td> 
      <td><Chart data={pressures} color='blue' units='hPa' /></td> 
      <td><Chart data={humidities} color='green' units='%' /></td> 
     </tr> 
    ); 
}` 

class WeatherList extends Component { renderWeather(cityData){

나는 생성자 this에 forceUpdate를 결합하려고하지만 난 또 다시 오류 메시지 Cannot read property 'forceUpdate' of undefined을 보내고 있습니다. 도와주세요.

전체 코드

class WeatherList extends Component {

renderWeather(cityData){ 
    const name = cityData.city.name; 
    const temps = cityData.list.map(weather => weather.main.temp); 
    const pressures = cityData.list.map(weather=>weather.main.pressure); 
    const humidities = cityData.list.map(weather=>weather.main.humidity); 
    const id = cityData.city.id; 



    return(
     <tr key={id}> 
      <td> 
       <div>{name}</div> 
       <h4 onClick={() => { 
        var toChange = JSON.parse(localStorage.nameForData); 
        for(var i in toChange){ 
         if(toChange[i].city.id = id){ 
          toChange.splice(i,1); 
         } 
        } 
        localStorage.nameForData = JSON.stringify(toChange); 
        forceUpdate(); 

       }} >Delete</h4> 
      </td> 
      <td><Chart data={temps} color='orange' units='K' /></td> 
      <td><Chart data={pressures} color='blue' units='hPa' /></td> 
      <td><Chart data={humidities} color='green' units='%' /></td> 
     </tr> 
    ); 
} 


render(){ 

    var arr = JSON.parse(localStorage.getItem('nameForData')); 

    arr = arr.concat(this.props.weather); 

    localStorage.setItem('nameForData', JSON.stringify(arr)); 

    //localStorage.setItem('nameForData', JSON.stringify(this.props.weather)); 
    console.log(arr); 

    return(
     <table className="table"> 
      <thead> 
       <tr> 
        <th>City</th> 
        <th>Temperature (K)</th> 
        <th>Pressure (hPa)</th> 
        <th>Humidity (%)</th> 
       </tr> 
      </thead> 
      <tbody> 
       {arr.map(this.renderWeather)} 
      </tbody> 
     </table> 
    ); 
} 

}`

Answer 1

당신은 forceUpdate 기능을 결합해서는 안된다. 전화 번호는 this.forceUpdate()입니다.

올바른 코드 :

// `renderWeather` function: 

<h4 onClick={() => { 
    var toChange = JSON.parse(localStorage.nameForData); 
    for(var i in toChange){ 
     if(toChange[i].city.id = id){ 
      toChange.splice(i,1); 
     } 
    } 
    localStorage.nameForData = JSON.stringify(toChange); 
    this.forceUpdate(); 

}} >Delete</h4> 

당신이 map에 this.renderWeather 기능을 전달하는 것처럼, 그것은 this 상황이 올 this 상황을 설정, undefined 것, 당신은 map 함수에 두 번째 인수로 전달해야합니다

// `render` function: 

<tbody> 
    {arr.map(this.renderWeather, this)} 
</tbody>