反应如何从构造函数访问道具，然后根据道具/状态制作组件

Question

I am not really sure how to properly ask this question but I will explain what I'm trying to do here:

So I have this parent Component which creates a Component like so:

<CurrentTemperature cityName={this.state.cityName}></CurrentTemperature>

The CurrentTemperature Component looks like this:

import React, { Component } from "react";

import "../App.css";

export default class CurrentTemperature extends Component {
    constructor(props) {
        super(props);

        this.state = {
            temperature: 0,
            cityName: this.props.cityName,
        };
    }

    componentDidMount() {
        //fetch the temperature from api here
    }

    render() {
        return (
            <div>
                <div className="city-temperature">
                    {this.state.cityName} {this.state.temperature}
                </div>
            </div>
        );
    }
}

All I'm trying to do is read the city name from the parent, then fetch the current temperature from my API, and then display both of those in the Component. But if I try to console.log(this.props.cityName) from anywhere other than from inside the city-temperature div, I always get an empty string. What is going on here?

Answer 1

cityName is the state of the parent component. I guess the parent component would get the "cityName" asynchronously. right? If this is the case, You have to put the temperature in the parent component as its state. And you have to insert the API call in the parent component. CurrentTemperature component will behave like a pure function component.

 const CurrentTemperature = ({temperature, cityName}) => { return ( <div className="city-temperature"> {cityName} {temperature} </div> ); } 

I guess this is not only the solution but also the best DX.

Answer 2

The constructor is called and the cityName inside state is set before the API call finishes.

I would suggest you to use props directly instead of storing the values inside state.

<div className="city-temperature">
    {this.props.cityName} {this.state.temperature}
</div>

When the API call is finished, component will re-render and display the data.

Note : If you really want to store it inside state, consider using getDerivedStateFromProps lifecycle hook.

Answer 3

You can remove this in your constructor, and then use this.state.cityName

constructor(props) {
  super(props);

  this.state = {
    temperature: 0,
    cityName: props.cityName,
  };
}