如何僅在反應中呈現子組件

Question

我正在學習反應，並試圖用mapbox繪制地圖。 我堅持如何分離渲染元素。

在渲染部分中，有一個<div/>元素和一個組件<CityWeather/> 。 div是對map的引用。 <Cityweather />是一個信息框，用於顯示基於緯度和長度的天氣信息。 app.js文件的渲染方法是

render(){
    console.log(this.state);
    return(
        <section>
            <div className="map-container" ref={x => { this.mapContainer = x;}}/>
            <CityWeather lat={this.state.lat} lng={this.state.lng} /> 
        </section>
    );

componentDidMount()是

componentDidMount() {
    this.getLocation();
    mapboxgl.accessToken = "";

    const { lng, lat, zoom } = this.state;
    const map = new mapboxgl.Map({
        container: this.mapContainer,
        style: "mapbox://styles/mapbox/streets-v11",
        center: [lng, lat],
        zoom: zoom
    });
   map.on("moveend", () => {
       const { lng, lat } = map.getCenter();
       this.setState({
           lng: lng.toFixed(4),
           lat: lat.toFixed(4),
           zoom: map.getZoom().toFixed(2)
       });
   });
 }

<CityWeather />組件

class CityWeather extends Component {
    constructor(props) {
        super(props);
        this.state = {
        name: ""
    };
 }
 componentDidMount() {
     console.log(this.props); // this logs only 1 time when the page loads
    fetch("api?lat=" + this.props.lat +"&lon=" +this.props.lng +       "&appid=")
        .then(res => res.json())
        .then(data => {this.setState({ name: data.name });
    }); // get name from lat and long and store it in state
}

render() {
    return (
        <div className="city-weather">
            <p>
                City | <span className="city">
                {this.state.name}</span>
            </p>
       </div>
    );
}
}

在每個事件中，控制台都記錄更新的緯度，經度和縮放。 此外， <CityWeather/>也會在Ist時間呈現。 之后，組件不會在狀態更改時呈現。

Answer 1

你在監聽器中添加了一個日志嗎？ 我認為這個方法沒有被調用，因為你沒有移動。 您可以使用計時器和一些模擬數據來測試渲染。

Answer 2

您已在componentDidMount加載了天氣數據。 它將僅在第一次呈現組件時運行，而不是在每次狀態更改時運行。

這是正確的代碼：

class CityWeather extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: ""
        };
    }
    componentDidMount() {
        this.load();
    }

    load(){
        console.log(this.props); // this logs only 1 time when the page loads
        fetch("api?lat=" + this.props.lat + "&lon=" + this.props.lng + "&appid=")
            .then(res => res.json())
            .then(data => {
                this.setState({ name: data.name });
            }); // get name from lat and long and store it in state

    }

    componentDidUpdate(prevProps) {
        // Typical usage (don't forget to compare props):
        if (this.props.lat !== prevProps.lat || this.props.lng !== prevProps.lng) {
            this.load();
        }
    }

    render() {
        return (
            <div className="city-weather">
                <p>
                    City | <span className="city">
                        {this.state.name}</span>
                </p>
            </div>
        );
    }
}