Question

我的应用程序（使用react-native制作）有点问题，当用户打开应用程序时，我有方法componentDidMount，它使用this.setState重新加载latitutde和经度状态。

之后我有一个函数将lat和long发送给我的动作。但是当用户连接setState和函数调用之间的时间非常短时，我的第一个API调用呈现未定义，因为状态在API调用之前不是最新的。在更新状态后，我不知道在哪里调用我的函数。

   componentWillMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          lat: position.coords.latitude,
          long: position.coords.longitude,
          error: null,
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
    setTimeout(() => {
        const {lat, long} = this.state
        console.log(lat)
        this.props.getConditions(lat, long)
    }, 1000)
}

即使使用setTimeout，console.log也会返回null（对应于我的初始状态）

感谢您的帮助

Answer 1

configure

这应解决您的问题，在完成状态更新后，将回调传递给setstate运行回调。 setState是异步的。

Answer 2

通常setState以异步方式工作。这意味着在调用setState之后，this.state变量不会立即更改。因此，如果要在状态变量上设置状态后立即执行操作然后返回结果，则回调将非常有用。

navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          lat: position.coords.latitude,
          long: position.coords.longitude,
          error: null,
        }, () => {
          this.props.getConditions(lat, long)
       });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );

详细了解when to use setState callback。

如何在api之前设置状态在React中调用

2 个答案: