反应状态不重新渲染

Question

我正在调用 api 并获得响应，然后将响应数据设置为状态。问题是在 setState 之后状态仍未定义，并且不会使用 api 数据更新 Weather 组件

class App extends React.Component {

  state = {

    temperature: undefined,

    icon: undefined,

    time: undefined,

    timezone: undefined,

    description: "123"

  };

  getWeather = async e => {

    e.preventDefault();

    const location = e.target.elements.city.value;

    const api_call = await fetch(`${GEO_API_URL}${location}`);

    const lngLat = await api_call.json();

    console.log(lngLat);

    const api_call2 = await fetch(

      `${API_URL}${lngLat.latitude},${lngLat.longitude}/?lang=sl&units=si`

    );

    const forecast = await api_call2.json();

    console.log(forecast);

    this.setState = {

      temperature: forecast.currently.temperature,

      icon: forecast.currently.icon,

      time: forecast.currently.time,

      timezone: forecast.timezone,

      description: forecast.currently.summary

    };

    console.log(this.state.temperature);

  };

  render() {

    return (

      <div>

        <Form getWeather={this.getWeather} />

        <Weather

          temperature={this.state.temperature}

          icon={this.state.icon}

          time={this.state.time}

          timezone={this.state.timezone}

          description={this.state.description}

        />

      </div>

    );

  }

}

export default App;

Answer 1

尝试使用&nbsp;this.setState({&nbsp; &nbsp; &nbsp; temperature: forecast.currently.temperature,&nbsp; &nbsp; &nbsp; icon: forecast.currently.icon,&nbsp; &nbsp; &nbsp; time: forecast.currently.time,&nbsp; &nbsp; &nbsp; timezone: forecast.timezone,&nbsp; &nbsp; &nbsp; description: forecast.currently.summary,});代替&nbsp; this.setState = ({&nbsp; &nbsp; &nbsp; temperature: forecast.currently.temperature,&nbsp; &nbsp; &nbsp; icon: forecast.currently.icon,&nbsp; &nbsp; &nbsp; time: forecast.currently.time,&nbsp; &nbsp; &nbsp; timezone: forecast.timezone,&nbsp; &nbsp; &nbsp; description: forecast.currently.summary,});

Answer 2

为 setState 方法使用正确的格式。this.setState({field: 'new value'});现在更改代码 setState 之类的。&nbsp;this.setState({&nbsp; &nbsp; &nbsp; temperature: forecast.currently.temperature,&nbsp; &nbsp; &nbsp; icon: forecast.currently.icon,&nbsp; &nbsp; &nbsp; time: forecast.currently.time,&nbsp; &nbsp; &nbsp; timezone: forecast.timezone,&nbsp; &nbsp; &nbsp; description: forecast.currently.summary,});