在 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>

在 jsx 中调用 forceUpdate

Calling forceUpdate inside jsx

javascript

this

jsx

reactjs