javascript - ComponentDidMount 不起作用 - Prop 不传递给子组件

Question

我必须将数据从 MyWeather 传递到 MyWeatherData，当我在 MyWeatherData 中使用 componentDidMount 时， Prop 不会传递到子组件。现在我在 MyWeatherData 中使用 componentDidUpdate 并且它可以工作，但会产生错误:Can only update a mounted or mounting component。请检查 ... 组件的代码。有人知道如何纠正这个问题吗？

当我通过时:<MyWeatherData lat="53.0038" lon="20.0458"/>它适用于 ComponentDidMount。

import React, {Component} from "react";

import MyWeatherData from "./MyWeatherData";

export default class MyWeather extends Component {
    constructor() {
        super();
        this.state = {
            latitude: "",
            longitude: ""
        }
        this.getMyLocation = this
            .getMyLocation
            .bind(this)
    }
    componentDidMount() {
        this.getMyLocation()
    }
    getMyLocation() {
        const location = window.navigator && window.navigator.geolocation

        if (location) {
            location.getCurrentPosition(pos => {
                this.setState({latitude: pos.coords.latitude, longitude: pos.coords.longitude})
            }, (error) => {
                this.setState({latitude: 'err-latitude', longitude: 'err-longitude'})
            })
        }
    }

    render() {
        const {latitude, longitude} = this.state;
        return (
            <div>
                <MyWeatherData lat={latitude} lon={longitude}/>
            </div>
        )
    }
}


import React, {Component} from "react";
import axios from "axios";

export default class MyWeatherData extends Component {
    constructor() {
        super();
        this.state = {
            descriptionMain: "",
            description: "",
            temperature: null,
            weatherIcon: "",
            name: ""
        }
    }
    componentDidUpdate = () => {
        this.getMyWeather();
    }

    getMyWeather = () => {
        const lat = this.props.lat;
        const lon = this.props.lon;
        const API_KEY = "e6f4d816d3ade705ec1d8d9701b61e14";
        const weatherURL = `https://api.openweathermap.org/data/2.5/weather?APPID=${API_KEY}&units=metric&lat=${lat}&lon=${lon}`;
        axios
            .get(weatherURL)
            .then(res => {
                this.setState({descriptionMain: res.data.weather[0].main, description: res.data.weather[0].description, temperature: res.data.main.temp, weatherIcon: res.data.weather[0].icon, name: res.data.name});
            })
            .catch(error => {
                console.log(error);
            });
    }
    render() {
        const {descriptionMain, description, temperature, weatherIcon, name} = this.state;
        return (
            <div>
                <h2>Weather for: {name}</h2>
                <h4>Sky: {description}</h4>
                <h5>Description: {descriptionMain}</h5>
                <span className="temperature">{temperature}
                    °C</span>
                {weatherIcon
                    ? (<img
                        src={`http://openweathermap.org/img/w/${weatherIcon}.png`}
                        alt={`${description}`}/>)
                    : null}

            </div>
        )
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

当在子组件中获取 componentDidMount 中的信息时，您的 props 已传递，但由于此时父组件的 componentDidMount 尚未运行，因此更新的 props 不可用，您应该在 componentWillReceiveProps 中添加该部分代码 每当 props 改变或父组件重新渲染时执行

import React, {Component} from "react";

import MyWeatherData from "./MyWeatherData";

export default class MyWeather extends Component {
    constructor() {
        super();
        this.state = {
            latitude: "",
            longitude: ""
        }
        this.getMyLocation = this
            .getMyLocation
            .bind(this)
    }
    componentDidMount() {
        this.getMyLocation()
    }
    getMyLocation() {
        const location = window.navigator && window.navigator.geolocation

        if (location) {
            location.getCurrentPosition(pos => {
                this.setState({latitude: pos.coords.latitude, longitude: pos.coords.longitude})
            }, (error) => {
                this.setState({latitude: 'err-latitude', longitude: 'err-longitude'})
            })
        }
    }

    render() {
        const {latitude, longitude} = this.state;
        return (
            <div>
                <MyWeatherData lat={latitude} lon={longitude}/>
            </div>
        )
    }
}


import React, {Component} from "react";
import axios from "axios";

export default class MyWeatherData extends Component {
    constructor() {
        super();
        this.state = {
            descriptionMain: "",
            description: "",
            temperature: null,
            weatherIcon: "",
            name: ""
        }
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.lat !== this.props.lat || nextProps.lon !== this.props.lon) {
          this.getMyWeather(nextProps);
        }

    }

    getMyWeather = (props) => {
        const lat = props.lat;
        const lon = props.lon;
        const API_KEY = "e6f4d816d3ade705ec1d8d9701b61e14";
        const weatherURL = `https://api.openweathermap.org/data/2.5/weather?APPID=${API_KEY}&units=metric&lat=${lat}&lon=${lon}`;
        axios
            .get(weatherURL)
            .then(res => {
                this.setState({descriptionMain: res.data.weather[0].main, description: res.data.weather[0].description, temperature: res.data.main.temp, weatherIcon: res.data.weather[0].icon, name: res.data.name});
            })
            .catch(error => {
                console.log(error);
            });
    }
    render() {
        const {descriptionMain, description, temperature, weatherIcon, name} = this.state;
        return (
            <div>
                <h2>Weather for: {name}</h2>
                <h4>Sky: {description}</h4>
                <h5>Description: {descriptionMain}</h5>
                <span className="temperature">{temperature}
                    °C</span>
                {weatherIcon
                    ? (<img
                        src={`http://openweathermap.org/img/w/${weatherIcon}.png`}
                        alt={`${description}`}/>)
                    : null}

            </div>
        )
    }
}