Javascript 为什么在ReactNative中要调用render（）两次？

我目前正在尝试制作一个只有一个屏幕的应用程序，其中屏幕的背景被以用户当前坐标为中心的地图占据。在下面的代码中，我将经度和经度保存为null，保存在App类组件的状态中。然后，我使用继承的方法“componentDidMount（）”用用户的当前位置更新状态，最后在render（）中，我使用this.state.latitude和this.state.longitude通知MapView的纬度和经度值

代码不编译。通过使用console.log，我发现问题在于render（）被调用了两次，我的console.log语句首先将null值输出到控制台，然后输出用户的当前位置

所以有两个问题

1） 为什么console.log会向控制台输出两次不同的值，一次是传入的状态值，另一次是componentDidMount（）更新的状态值

2） 如何运行函数navigator.geolocation.getCurrentPosition（）来保存用户的当前位置并将其传递给MapView，以便首先编译代码

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

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(position => {
      this.setState({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
      });
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles2.map}
          initialRegion={{
            latitude: this.state.latitude,
            longitude: this.state.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />

        {console.log(this.state.latitude)}
        {console.log(this.state.longitude)}
      </View>
    );
  }
}

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={纬度：null，经度：null}；
}
componentDidMount（）{
navigator.geolocation.getCurrentPosition（位置=>{
这是我的国家({
纬度：位置。坐标。纬度，
经度：position.coords.longitude，
});
});
}
render（）{
返回(
{console.log（this.state.latitude）}
{console.log（this.state.longitude）}
);
}
}

React将在组件通过

state

或道具更新时重新渲染。在

componentDidMount（）

中，您正在调用

setState（）

，因此在此之后的某个时刻（因为它是异步的），您的组件将需要更新新的

状态，以便再次呈现

第一个
render（）
在安装组件时出现。在这里，您将看到您所在州的
纬度
和
经度
的初始值

安装组件后，对
setState（）
的调用将使用
latitude
和
longitude
的新值更新
state
，因此组件将
render（）
第二次，您将看到
latitude
和
longitude
的新值

编辑：

如果要避免第一次显示
纬度
和
经度
（注意，它仍将渲染两次），可以有条件地渲染，即

render() {
    if(!this.state.longitude) {
      return <View>Loading...</View>;
    }

    return (
      <View style={styles.container}>
        <MapView
          style={styles2.map}
          initialRegion={{
            latitude: this.state.latitude,
            longitude: this.state.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>
    );
}

render（）{
如果（！this.state.longitude）{
返回装载。。。；
}
返回(
);
}
如果状态或道具的值发生更改，则始终会调用render方法
#2很容易-您装载了组件（render 1），然后在组件“did mount”之后运行“componentDidMount”，然后等待返回位置，即render 2。记住，React，通过设计，将呈现很多

其前提是，它采用通常非常昂贵的方式（更新整个DOM），而是管理自己的“虚拟DOM”，而更新起来非常便宜。昂贵的DOM更新被优化为只更新已更改的部分，因此您可以自由地重新运行
render（）
。您有时会发现渲染方法速度较慢，可能需要返回并进行优化，但它们是例外，而不是规则

#1实际上描述了您的代码工作得非常完美
getCurrentPosition
是异步的（通过其回调），它正确地获取lat/lng。如果只是在渲染时抛出错误，那就是JSX的问题。尝试简化它，例如，
{this.state.longitude}，{this.state.latitude}
以查看它是否呈现了正确的值，然后从那里进行构建。
乍一看，我看到return中缺少标记。@Rama这些看起来像是由于没有正确地将代码缩进4个空格而导致的格式错误。谢谢！您是否有任何关于此代码如何通过更新的经度/纬度以便第一次使用正确的坐标进行渲染的反馈？@SarthakAgrawal您可以有条件地进行渲染。我将编辑答案以包括一个示例