React组件传参：如何将AirPollutionApi的state数据传给Home？

核心问题分析 #

1. 循环引用触发无限渲染：AirPollutionApi组件导入Home，Home又导入AirPollutionApi，形成循环依赖，导致组件无限递归渲染，最终引发服务崩溃。
2. 直接修改React状态：retrieveLocation方法中直接赋值this.state.latitude和this.state.longitude，违反React状态更新规则，会造成状态不同步、组件无法正常重新渲染。
3. 数据流向逻辑倒置：试图在两个组件间互相嵌套传递数据，而非通过顶层父组件统一管理数据并向下分发。

解决方案步骤 #

1. 打破循环引用 #

移除两个组件间的互相导入，创建顶层父组件（如App.js）作为入口，统一管理数据并传递给Home和AirPollutionApi组件。

2. 修复状态更新方式 #

在retrieveLocation中使用setState更新经纬度，替代直接修改this.state的错误写法。

3. 调整数据传递逻辑 #

由父组件协调数据获取流程，将AirPollutionApi获取到的空气质量数据，通过props分别传递给Home（用于仪表盘展示）和AirPollutionApi自身（用于指标渲染）。

修改后的代码 #

修复后的AirPollutionApi组件 #

import { Component } from 'react';

// 移除对Home的导入，避免循环引用
var API_KEY = process.env.REACT_APP_OPEN_WEATHER_MAP_API_KEY

class AirPollutionApi extends Component {
    state = {
        airQualityData: {},
        latitude: undefined,
        longitude: undefined
    }

    async componentDidMount() {
        await this.retrieveLocation()
        await this.fetchAirQualityData()
    }

    fetchAirQualityData = () => {
        if (!this.state.latitude || !this.state.longitude) return Promise.resolve();
        
        return fetch(
            `http://api.openweathermap.org/data/2.5/air_pollution?lat=${this.state.latitude}&lon=${this.state.longitude}&appid=${API_KEY}`
        )
        .then(res => res.json())
        .then(data => {
            this.setState({ airQualityData: data })
            // 数据获取完成后通知父组件
            this.props.onDataLoaded(data)
        })
    }

    retrieveLocation = () => {
        return new Promise((resolve, reject) => {
            navigator.geolocation.getCurrentPosition((position) => {
                // 使用setState更新状态，而非直接赋值
                this.setState({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude
                }, resolve);
            }, reject)
        })
    }

    getAQIValue = () => {
        const data = this.props.airQualityData || this.state.airQualityData;
        return data.list ? data.list[0].main.aqi * 100 : undefined
    }

    getCOValue = () => {
        const data = this.props.airQualityData || this.state.airQualityData;
        return data.list ? data.list[0].components.co : undefined
    }

    getNH3Value = () => {
        const data = this.props.airQualityData || this.state.airQualityData;
        return data.list ? data.list[0].components.nh3 : undefined
    }

    getNOValue = () => {
        const data = this.props.airQualityData || this.state.airQualityData;
        return data.list ? data.list[0].components.no : undefined
    }

    render() {
        return (
            <div>
                {/* AQI */}
                {this.props.data.includes("aqi") || this.props.data.includes("AQI")  ? 
                    <div style={this.props.aqiStyle} className='aqi-value'>
                        {this.getAQIValue()}
                    </div>
                : null}
                
                {/* CO */}
                {this.props.data.includes("co") || this.props.data.includes("CO")  ? 
                    <div style={this.props.coStyle} className='co-value'>
                        {this.getCOValue()}
                    </div>
                : null}

                {/* NH3 */}
                {this.props.data.includes("nh3") || this.props.data.includes("NH3")  ? 
                    <div style={this.props.nh3Style} className='nh3-value'>
                        {this.getNH3Value()}
                    </div>
                : null}

                {/* NO */}
                {this.props.data.includes("no") || this.props.data.includes("NO")  ? 
                    <div style={this.props.noStyle} className='no-value'>
                        {this.getNOValue()}
                    </div>
                : null}
            </div>
        )
    }
}

export default AirPollutionApi;

修改后的Home组件 #

import React from 'react';
import ReactSpeedometer from 'react-d3-speedometer';

// 移除对AirPollutionApi的导入
const Home = (props) => {
    // 从props获取AQI值，处理空数据情况
    const aqiValue = props.airQualityData?.list?.[0]?.main?.aqi * 100 || 0;

    return (
        <div>
            <h1 style={{fontFamily: "Montserrat", textAlign: "center", fontSize: "300%"}}>
                AQI:
            </h1>
            <ReactSpeedometer value={aqiValue} maxValue={500} minValue={0} />
        </div>
    );
};

export default Home;

新增顶层App组件（入口） #

import { Component } from 'react';
import Home from './Home';
import AirPollutionApi from './utils/airPollutionApi';

class App extends Component {
    state = {
        airQualityData: {}
    }

    handleDataLoaded = (data) => {
        this.setState({ airQualityData: data })
    }

    render() {
        return (
            <div>
                {/* 传递空气质量数据给Home */}
                <Home airQualityData={this.state.airQualityData} />
                {/* 传递数据给AirPollutionApi，同时监听数据加载完成事件 */}
                <AirPollutionApi 
                    data={["aqi", "co", "nh3", "no"]} 
                    onDataLoaded={this.handleDataLoaded}
                    airQualityData={this.state.airQualityData}
                />
            </div>
        )
    }
}

export default App;

关键说明 #

• 循环引用被彻底打破：App作为父组件单独导入两个子组件，避免了互相依赖导致的无限渲染。
• 状态更新符合React规则：使用setState更新经纬度，确保组件能正确响应状态变化。
• 数据流向清晰：AirPollutionApi负责获取数据，通过回调传递给App，再由App分发给Home和AirPollutionApi自身，实现数据共享。

内容的提问来源于stack exchange，提问作者Sohan Bhat