Question

我有一个简单的函数试图更新状态。调用该函数时状态不会更新。

单击按钮，将调用getCityWeather函数。我还提供了下面的沙箱网址，可以使用它。

export class AppMain extends Component {
  constructor(props) {
    super(props);
    this.state = {
      weather: "",
      query: "",
      countryQuery: "IN",
      currentCity: "Search a town...",
      currentDate: new Date().setHours(23, 59, 59, 0) / 1000,
      forecast: ""
    };
  }

  getCityWeather = () => {
    console.log(this.state.query);
   //ABOVE STATEMENT NOT GETTING LOGGED WITH UPDATED TEXT
  };

  handleCityChange = e => {
    //BELOW STATEMENT IS EXECUTING FINE
    console.log("city change called");
    this.setState({ query: e.target.value }, this.getCityWeather);
  };

  render() {
    return (
      <div>
        <WeatherFilter handleCityChange={this.handleCityChange} />
        <div />
      </div>
    );
  }
}

下面是沙箱网址，不确定状态未更新的原因。

https://codesandbox.io/s/weather-report-rgu7y-rgu7y

有没有办法解决这个问题？

Answer 1

在输入时进行更改并提交以创建新方法。

export class WeatherFilter extends React.Component {
  render() {
    return (
      <div>
        <input type="text" placeholder="Enter City Name" onChange={this.props.handleCityChange}/>
        <button onClick={this.props.handleSubmit}>Submit</button>
      </div>
    );
  }
}

Answer 2

您需要在输入本身上放置onChange事件处理程序，以便访问e.target.value

<input onChange={this.props.handleCityChange} type="text" placeholder="Enter City Name" />

Answer 3

有两个问题，一个是不处理文本框上的onChange或没有捕获input text box中的值。其他是更新后的日志状态。为了记录更新后的状态，请将回调作为第二个参数传递给this.setState或调用将状态记录在componentDidUpdate

中的函数

weatherFilter.js

import React from "react";
import "./styles.css";

export class WeatherFilter extends React.Component {
  render() {
    return (
      <div>
        <input
          type="text"
          placeholder="Enter City Name"
          onChange={this.props.handleCityChange}
        />
        <button onClick={this.props.handleSubmit}>Submit</button>
      </div>
    );
  }
}

将回调作为第二个参数传递

handleSubmit = e => {
    this.setState({ query: this.state.queryval },()=>this.getCityWeather());
  };

或

componentDidUpdate() {
    this.getCityWeather();
   }

Fixed sandbox code

反应状态未在函数调用中得到更新

3 个答案: