Question

我尝试在天气应用中进行响应，但是当我在const API中添加${this.state.latitude}时，我将其替换为null。但是，当我尝试在this.state.latitude中显示render()时，我有一个值。怎么了？

export class TodayWeather extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            latitude: "",
            longitude: "",
        };
    }

    getMyLocation =() => {
        const location = navigator.geolocation;
        if (location) {
            location.getCurrentPosition((position) => {
                this.setState({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                })
            },)}
    };

    getWeather = () => {
        this.getMyLocation();

        const API = `http://api.openweathermap.org/data/2.5/forecast?lat=${this.state.latitude}&lon=139&appid=${apiKey}`;

        fetch(API)
            .then(response => {
                if (response.ok) {
                    return response
                }
                throw Error("")
            })
            .then(response => response.json())
            .then(data => {
                const time = new Date().toLocaleString();
                this.setState({
                })
            })})
    };
    componentDidMount() {
        this.getWeather();
    }
    render(){
            return (
            <div className="App">
                <Result className="result" weather={this.state}/>
                <p> {this.state.latitude} </p>
            </div>
        );
    }
}

Answer 1

尝试这个..但是代码看起来很混乱

def mainfunction():
    while True:
        print("Starting")
        try:
            if driver.find_element_by_xpath(PROXY_DENIES_CONNECTION).is_enabled() and driver.find_element_by_xpath(
                    PROXY_DENIES_CONNECTION).is_displayed():
                print("Proxy denies connection")
                driver.quit()

            if driver.find_element_by_xpath(TIMEOUT_XPATH1).is_enabled() and driver.find_element_by_xpath(
                    TIMEOUT_XPATH1).is_displayed():
                print("Time out detected")
                driver.quit()

            if driver.find_element_by_xpath(PLAY_BUTTON_XPATH).is_enabled() and driver.find_element_by_xpath(
                    PLAY_BUTTON_XPATH).is_displayed():
                print("Agar.io server is loaded")
                break
        except NoSuchElementException:
            continue

Answer 2

预期的执行顺序为：

this.getMyLocation()，用于设置latitude和longitude的状态。
this.getWeather()，它使用状态变量发出xhr请求（再次异步）。

this.setState是也是异步的。因此，在设置状态变量时，this.getWeather()已经开始执行，因此它返回null，并且获取请求失败。因此，设置状态变量后，它将触发重新渲染，这就是为什么它确实出现在render中的原因。

解决方案是在setState中使用回调。我做了一些小的修改。

我在this.getMyLocation()上打了componentDidMount：

  componentDidMount() {
    this.getMyLocation();
  }

在其中利用回调并调用修改后的this.getWeather：

this.setState(
          {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude
          },
          this.getWeather
);

不再从其开始调用this.getMyLocation()的地方。

除此之外，一个明显的缺陷是，提取完成后，您没有将任何东西传递给setState，大概是您获得的json数据。

      .then((data) => {
        const time = new Date().toLocaleString();
        this.setState({
          // Something needs to come here, possibly:
          data
        });
      });

完整代码：

export default class TodayWeather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      latitude: '',
      longitude: ''
    };
  }

  getMyLocation = () => {
    const location = navigator.geolocation;
    if (location) {
      location.getCurrentPosition((position) => {
        this.setState(
          {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude
          },
          this.getWeather
        );
      });
    }
  };

  getWeather = () => {
    const API = `http://api.openweathermap.org/data/2.5/forecast?lat=${
      this.state.latitude
    }&lon=139&appid=${apiKey}`;

    fetch(API)
      .then((response) => {
        if (response.ok) {
          return response;
        }
        throw Error('');
      })
      .then((response) => response.json())
      .then((data) => {
        const time = new Date().toLocaleString();
        this.setState({
          // Something needs to come here
          data
        });
      });
  };

  componentDidMount() {
    this.getMyLocation();
  }

  render() {
    return (
      <div className="App">
        <Result className="result" weather={this.state} />
        <p> {this.state.latitude} </p>
      </div>
    );
  }
}

反应this.state为null

2 个答案: