如何仅在 parent 的状态更新后才接收道具？

Question

我正在尝试构建一个小天气小部件，其中用户的地理位置在一个组件中捕获，然后传递到 child 组件，该组件获取天气数据（基于位置）和然后最终呈现一个指示当前天气状况的图标。

我将经度和纬度状态作为道具传递给我的 WeatherWidget。不幸的是，WeatherWidget 也接收到初始状态 null。我怎样才能避免这种情况？

感谢您的帮助！

class GetGeolocation extends Component{
    constructor(){
        super();
        this.state = {
            lngt: null,
            latd: null
        }

    }

    componentDidMount(){
        this.getLocation()
    }

    getLocation = () => {
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(position => {
                this.setState({lngt: position.coords.longitude.toFixed(4)});
                this.setState({latd:position.coords.latitude.toFixed(4)});
             }    
            );
        };
    }

    render(){
        return (
            <>
            <WeatherWidget lngt = {this.state.lngt} latd = {this.state.latd} />
            </>
        )
    }

class WeatherWidget extends Component{
    constructor(props){
        super(props);
        this.state = {
            weather:[]
        }
    }
    componentWillReceiveProps(nextProps){
        this.getWeather(nextProps)
    }

    getWeather = (location) => {

        console.log(location) 
        // The console logs twice:
        // First:
        //{lngt: "-12.3456", latd: null}
        //Then, the correct values:
        //{lngt: "-12.3456", latd: "78,9999"}



    }

Answer 1

不要使用 componentWillReceiveProps，这将在以后的 React 版本中弃用。

而且，您也可以在生命周期方法中设置条件逻辑来确定要执行的代码。

componentWillReceiveProps(nextProps){
    //condition says if both value are truthy then run code.
    if(nextProps.lngt && nextProps.latd){
         this.getWeather(nextProps)
    }
}

您也可以使用componentDidUpdate()

componentDidUpdate(){
    //condition says if both value are truthy then run code.
    if(this.props.lngt && this.props.latd){
         this.getWeather(this.props)
    }
}

Answer 2

一种选择是在父组件中有条件地渲染：

class GetGeolocation extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      lngt: null,
      latd: null
    };
  }

  componentDidMount() {
    this.getLocation();
  }

  getLocation = () => {
    // Simulate the network request
    setTimeout(() => this.setState({ lngt: 100 }), 1000);
    setTimeout(() => this.setState({ latd: 100 }), 1000);
  };

  render() {
    const { lngt, latd } = this.state;
    if (!lngt || !latd) return null;

    return <WeatherWidget lngt={lngt} latd={latd} />;
  }
}

class WeatherWidget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      weather: []
    };
  }

  componentDidMount() {
    this.getWeather(this.props);
  }

  getWeather = location => {
    console.log(location);
  };

  render() {
    return null;
  }
}

如何仅在 parent 的状态更新后才接收道具？

How to receive props only after state of parent has updated?

components

reactjs

react-props

react-lifecycle-hooks