Question

我在componentDidMount（）中使用setState来设置相同变量的状态，但是我意识到第一个setState始终会受到影响，并且变量采用第一个setState上定义的值。我希望第二个覆盖第一个，并为变量提供第二个setState的值。即使我更改顺序相同的结果。为什么会这样？确切地说，我说的是纬度和经度变量。

  componentDidMount() {

    fetch('myUrl')
      .then((response) => response.json())
      .then((responseJson) => {
        Geocoder.setApiKey('myUrl');
        Geocoder.getFromLocation(responseJson.comune_nascita).then(
          json => {
            var location = json.results[0].geometry.location;
            this.setState({
              Load:false,
              latitude:location.lat,
              longitude:location.lng
            })

          },

            error => {
              alert(error);
            }
          );
      })

      .catch((error) => {
        console.log(error)
      });


        navigator.geolocation.getCurrentPosition(position => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
        error => this.setState({ error: error.message }),
        { enableHighAccurancy: false, timeout: 2000, maximumage: 2000 }
      );
   }

Answer 1

您的问题似乎表明“第一个setState”是在获取请求中调用的setState，而“第二个setState”是在导航器的getCurrentPosition方法中调用的setState。据此，我有一些答案和建议。

这是您的代码异步的问题。如您所见，调用将被调用，然后一旦完成，它将把状态设置为纬度和经度。第二个调用不是 asynchronous 调用，而是在调用componentDidMount时立即调用。

从本质上讲，第二个setState调用实际上是在组件安装后立即被首先调用的，然后一旦提取完成，第一个setState就会覆盖它。

要解决此问题，我建议您调整此功能的工作方法。异步调用将始终排在第二位，因此您可能需要切换默认值。

为什么第一个SetState总是受到影响，而第二个SetState却不响应本机？

1 个答案: