仅在父状态更新后如何接收道具？

Posted 2023-02-23

【中文标题】仅在父状态更新后如何接收道具？

【英文标题】：How to receive props only after state of parent has updated?

【发布时间】：2020-01-16 07:46:09

【问题描述】：

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

我将经度和纬度状态作为道具传递给我的 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"



    

【参考方案1】：

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

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;
  

【参考方案2】：

不要使用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)