反应。如何使用fetch和setState仅针对现有密钥处理API响应中缺少的密钥？

Question

我正在研究一个使用公共API来获取一些数据的React项目。问题是我发现很多有趣且绝对非常有价值的API可能会丢失一些数据。例如，我正在使用waqi.info收集世界各地电台的空气质量信息。这是一个问题 - 当我发送请求时，我需要来自响应JSON的特定键的值。有些站点不收集部分数据，因此我没有找到JSON中的密钥。因为效果我得到了我的期望：

Uncaught (in promise) TypeError: Cannot read property 'v' of undefined

我只需要在响应中存在键的情况下更改状态，或者更好 - 将状态设置为给定值，例如“无数据”。我可以手动检查每个键的'undefined'，但它非常粗糙，我正在寻找更聪明，更优雅的东西。组件代码（从大多数不必要的东西中删除）在这里：

class Item extends React.Component {
    constructor(){
        super();
        this.state={
            dataSourceName: null,
            dataSourceDetailsCO: null,
            dataSourceDetailsNO2: null,
            dataSourceDetailsPM10: null,
            dataSourceDetailsPM25: null,
            dataSourceDetailsSO2: null, 
            dataSourceDetailsTemp: null,
            dataSourceDetailsWind: null
        }; 
    }
    fetchStationDetails = () => {
        const stationUid = this.props.uid;
        const urlStationDetails = 'https://api.waqi.info/feed/@' + stationUid + '/?token=' + apiKey;
        fetch(urlStationDetails)
            .then(res => res.json())
            .then(json => this.setState({
                dataSourceName: json.data.attributions[0].name,
                dataSourceDetailsCO: json.data.iaqi.co.v,
                dataSourceDetailsNO2: json.data.iaqi.no2.v,
                dataSourceDetailsPM10: json.data.iaqi.pm10.v,
                dataSourceDetailsPM25: json.data.iaqi.pm25.v,
                dataSourceDetailsSO2: json.data.iaqi.so2.v, 
                dataSourceDetailsTemp: json.data.iaqi.t.v,
                dataSourceDetailsWind: json.data.iaqi.w.v
            })) 
    }
    render(){
        const dataSourceName = this.state.dataSourceName;
        return (
            <li>
                <div>
                    Id: {this.props.uid} Longitude: {this.props.lon} Latitude: {this.props.lat}
                </div>
                <div>
                    General Air Quality Index (AQI): {this.props.aqi}
                </div>
                <div>
                    <button onClick={this.fetchStationDetails}>Click to get detailed data</button>
                </div>
                {dataSourceName ? <ItemData 
                    dataSourceName={this.state.dataSourceName}
                    dataSourceDetailsCO={this.state.dataSourceDetailsCO}
                    dataSourceDetailsNO2={this.state.dataSourceDetailsNO2}
                    dataSourceDetailsPM10={this.state.dataSourceDetailsPM10}
                    dataSourceDetailsPM25={this.state.dataSourceDetailsPM25}
                    dataSourceDetailsSO2={this.state.dataSourceDetailsSO2}
                    dataSourceDetailsTemp={this.state.dataSourceDetailsTemp}
                    dataSourceDetailsWind={this.state.dataSourceDetailsWind}
                /> : null }
            </li>
        )
    }
}

先感谢您 ：）

Answer 1

这是一个常见问题，您需要始终考虑到这一点，您应该尝试做的是解析JSON并检查您要查找的节点是否已定义或创建白名单，还有很多重复代码，你可以清理并使其更清晰：

whiteList = {
    dataSourceName:"co",
    dataSourceDetailsNO2:"no2",
    dataSourceDetailsPM10:"pm10",
    ...
    ...
}

parseData = (data) => {
    try{
        Object.entries(this.whiteList).forEach(([key, value]) => {

            this.setState({
               [key]:data.data.iaqi[value].v
            })
        })
    }catch(e){
        //handle Errors
    }
}


fetchStationDetails = () => {
    const {uid} = this.props;

    const urlStationDetails = `https://api.waqi.info/feed/@${uid}/?token=${apiKey}`;

    fetch(urlStationDetails)
        .then(res => res.json())
        .then(json => this.parseData(json)) 
        .catch(console.log)
}