Как визуализировать дочерние компоненты только в реакции

Question

Я учусь реагировать и пытаюсь построить карту с помощью mapbox.Я застрял с тем, как визуализировать элементы по отдельности.

В части рендеринга есть элемент <div/> и компонент <CityWeather/> в оболочке.div является ссылкой на карту.<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/> также отображается в первый раз.После этого компонент не отображается при изменении состояния.

Answer 1

Вы загрузили данные о погоде в 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>
        );
    }
}

Answer 2

Вы добавили журнал в слушателе?Я думаю, что метод не был вызван, потому что вы не двигались.Вы можете использовать таймер и некоторые фиктивные данные для проверки рендеринга.