Question

我必须将数据从MyWeather传递到MyWeatherData，当我在MyWeatherData中使用componentDidMount时，会发生道具没有传递到子组件。现在我在MyWeatherData中使用componentDidUpdate并且它可以工作，但它会产生错误：只能更新已安装或安装的组件。请检查...组件的代码。有人知道如何纠正这个问题吗？

当我通过：<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

在childComponent中获取componentDidMount中的信息时，会传递道具，但由于当时没有运行父级的componentDidMount，因此更新的道具不可用，您应该在{{1}中添加该部分代码每当道具改变或父组件重新渲染时执行

componentWillReceiveProps

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

1 个答案: