在jsx里面调用forceUpdate

Question

我对this表示法不太好，所以在尝试在我的jsx中调用方法forceUpdate（）时遇到一些麻烦。

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

我试图绑定forceUpdate在构造this，但我一次又一次有错误消息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> 

当您传递this.renderWeather功能map，它this方面会undefined，设置正确this情况下，你应该把它作为第二个参数map功能：

// `render` function: 

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