在jsx内部调用forceUpdate

Calling forceUpdate inside jsx

本文关键字：forceUpdate 调用 内部 jsx      更新时间：2023-09-26

我不擅长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>
    );
}
}

您不应该绑定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>
相关文章：