Aufruf von ForceUpdate innerhalb Jsx

Question

Ich bin nicht gut mit this Notation, so habe ich einige Probleme, wenn versuchen, Methode forceUpdate() in meinem Jsx aufrufen.

class WeatherList extends Component { renderWeather(cityData){

//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> 
    ); 
}` 

Ich versuchte forceUpdate zu this in Konstruktor zu binden, aber ich habe Fehlermeldung Cannot read property 'forceUpdate' of undefined immer wieder. Bitte hilf mir.

Voll Code

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

Sie sollten forceUpdate Funktion nicht binden. Verwenden Sie es, indem Sie this.forceUpdate() aufrufen.

Korrekter Code:

// `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> 

Wie Sie this.renderWeather Funktion map sind vorbei, es this Zusammenhang wäre undefined, richtig sein this Kontext zu setzen, sollten Sie es als zweites Argument an map Funktion übergeben:

// `render` function: 

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