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

1 个答案: