Question

我正在学习做出反应，并正在尝试使用mapbox绘制地图。我对如何分别渲染元素感到困惑。

在渲染部分中，有一个mean元素和一个包装的组件df = df.groupby(df['datetime'].dt.strftime('%m/%Y')).mean() print (df) val1 val2 val3 val4 val5 val6 val7 val8 val9 \ datetime 06/2017 0 0.000000 0 0 0 0.000000 0.000000 0 0 08/2017 0 0.143333 0 0 0 0.186667 0.183333 0 0 val10 val11 val12 datetime 06/2017 0.0115 0 0.035667 08/2017 0.0120 0 0.034000。 <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 />也是第一次渲染。之后，该组件不会在状态更改时呈现。

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>
        );
    }
}

如何仅在反应中渲染子组件

2 个答案: