Question

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

代码无法编译。使用console.log，我已经解决了问题，即render（）被调用两次，我的console.log语句首先将空值输出到控制台，然后输出用户的当前位置。

所以有两个问题。

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>
    );
  }
}

Answer 1

只要您的组件通过

import random
guess = '0'
while (guess) != exit:
    answer = random.randrange(1,100)
    answer = str(answer)
    guess = input('Enter a number between 1 and 100 or enter exit to exit: ')
    guess = (guess)
    if guess == answer:
        print('Correct')
    elif guess > answer :
        print('Too high, try again')
    elif guess < answer :
        print('Too low, try again')

或道具进行更新，

React就会重新呈现。在state您正在调用componentDidMount()，因此在此之后的某个时刻（因为它是异步的），您的组件将需要更新新的setState()，以便再次呈现。

组件安装时会出现第一个state。您可以在此处查看您所在州的render()和latitude的初始值。

在您的组件装入后，您对longitude的通话将使用setState()和state的新值更新latitude，以便您的组件longitude a第二次，您将看到render()和latitude的新值。

编辑：

如果你想避免第一次显示longitude和latitude（注意它仍会呈现两次）你可以有条件地渲染，即

longitude

Answer 2

始终调用render方法，即更改state或props中的值

Answer 3

＃2很简单 - 你安装了组件（渲染1），然后“componentDidMount”在组件“挂载”之后运行，然后等待返回的位置，即渲染2.请记住，React，设计，将渲染很多。

最重要的是，它需要通常非常昂贵的（更新整个DOM），而是管理自己的“虚拟DOM”，这是非常便宜的更新。昂贵的DOM更新被优化为仅更新已更改的部分，因此您可以自由地重新运行render()。您有时会发现渲染方法很慢，您可能需要返回并进行优化，但它们是例外，而不是规则。

＃1实际上描述了您的代码完美运行。 getCurrentPosition是异步的（通过其回调），它正确获取lat / lng。如果它只是简单地渲染它就会抛出错误，这对你的JSX来说是一个问题。尝试简化它，例如<p>{this.state.longitude}, {this.state.latitude}</p>看到它呈现正确的值，然后从那里构建。

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

3 个答案: