Question

我有一个警报组件，只要我将代码添加到主组件中的componentWillMount，就会呈现两次。 The project is an expo project

我通过将控制警报组件可见性的属性设置为false然后调用this.startAlert（）来更改componentWillMount过程中的可见性状态，从而解决了这个问题。在解决方法之前，仅在按下对话框上的按钮后才更改可见性状态。

这很有效。它会显示一次警告对话框。 this.startAlert（）;在承诺中执行。

componentWillMount() {

    const  setPosition = (pos) => {

        console.log(pos) ;

    // We need the "latitude" and the "longitude"
    // in order to lookup the "address" from the
    // Google maps API.
    const {
      coords: {
        latitude,
        longitude,
      },
    } = pos;

    // Fetches data from the Google Maps API then sets
    // the "address" state based on the response.
    fetch(`${URL}${latitude},${longitude}`)
      .then(resp => resp.json(), e => console.error(e))
      .then(({
        results: [
          { formatted_address },
        ],
      }) => {
            this.setAddress( formatted_address ) ;
            this.startAlert() ;         
      });
    } ;


    navigator.geolocation.getCurrentPosition(setPosition) ;

}

然而这失败了。警报组件显示两次。 this.startAlert（）;在获取承诺之外调用。

componentWillMount() {

    const  setPosition = (pos) => {

        console.log(pos) ;

    // We need the "latitude" and the "longitude"
    // in order to lookup the "address" from the
    // Google maps API.
    const {
      coords: {
        latitude,
        longitude,
      },
    } = pos;

    // Fetches data from the Google Maps API then sets
    // the "address" state based on the response.
    fetch(`${URL}${latitude},${longitude}`)
      .then(resp => resp.json(), e => console.error(e))
      .then(({
        results: [
          { formatted_address },
        ],
      }) => {
            this.setAddress( formatted_address ) ;      
      });
    } ;

    this.startAlert() ; 
    navigator.geolocation.getCurrentPosition(setPosition) ;

}

为什么当可见性状态未更改时，react-native警报组件会呈现两次？

编辑：设置地址的代码。

// Getter for "Immutable.js" state data...
get data() {
  return this.state.data;
}

// Setter for "Immutable.js" state data...
set data(data) {
  this.setState({ data });
}

setAddress = (address) => {
    this.data = this.data.set('address', address ) ;
}

Answer 1

可能有助于突出显示两个代码片段之间的特定差异，因为乍一看甚至一点点阅读它们看起来大致相同。 this.setAddress(...)的定义似乎不包括在内，但它是否过渡性地称为this.setState(...)？ this.setState(...)导致重新呈现this。

当可见性状态未更改时，为什么react-native警报组件会呈现两次？

1 个答案: