Reactjs 在React组件中处理深度嵌套的数据

在我的组件中，我面临着一个进退两难的境地：我试图访问的数据还“不存在”。例如，当我记录我的redux操作时，我得到以下信息：

第一张图片是数据加载时的样子，第二张图片是嵌套数据接收时的样子

因此，我必须在组件的render方法内部运行检查，例如：

const data = homepage.upcomingTrips.data.upcoming_hikes;
{ !loading && data && data.upcoming_hikes &&
    ...more code here
}

_reducers/主页/即将发布的_trips.reducer.js：

import { homepageConstants } from '../../_constants';

export function upcomingTrips(state = {}, action) {

switch (action.type) {
    case homepageConstants.UPCOMING_TRIPS_REQUEST:
        return {
            data: {},
            loading: true,
        };
    case homepageConstants.UPCOMING_TRIPS_SUCCESS:
        return {
            data: action.data,
            loading: false,
        };
    case homepageConstants.UPCOMING_TRIPS_FAILURE:
        return {
            error: action.error,
        };

    default:
        return state;
    }
}

_reducers/homepage/index.js：

import { combineReducers } from 'redux';

import { currentPack } from './current_pack.reducer';
import { totalMiles } from './total_miles.reducer';
import { upcomingTrips } from './upcoming_trips.reducer';

const homepage = combineReducers({
    currentPack,
    totalMiles,
    upcomingTrips,
});

export default homepage;

_reducers/index.js

import { combineReducers } from 'redux';

import { authentication } from './authentication.reducer';
import { registration } from './registration.reducer';
import { users } from './users.reducer';
// import { homepageData } from './homepage.reducer';
import homepage from './homepage';
import { explorepageData } from './explorepage.reducer';
import { alert } from './alert.reducer';

const rootReducer = combineReducers({
  authentication,
  registration,
  users,
  homepage,
  explorepageData,
  alert
});

export default rootReducer;

UpcomingTrips.jsx：

class UpcomingTrips extends Component {

    componentDidMount() {
        this.props.getUpcomingTrips();
    }

    render() {
        const { classes, homepage } = this.props;
        const data = homepage.upcomingTrips.data.upcoming_hikes;
        const loading = homepage.upcomingTrips.data.loading;
        console.log('homepage: ', homepage.upcomingTrips.data.upcoming_hikes);

        return (
            <UpcomingTripStyles>
                <Typography variant='h4' className={ `${ classes.headline } ${ classes.widgetName }` }>
                    Upcoming Trips
                </Typography>
                { loading && <img src='/static/loading.svg' alt='loading' className='loading-img' /> }
                <ul className='upcoming-hikes'>
                    { !loading && data && data.upcoming_hikes &&
                        data.upcoming_hikes.map((h) =>
                            <li className='hike-item' key={ h.id }>
                            <span className='start-date'>{ toDate(h.start_date) }</span>
                            <span className='hike-name'>{ h.name }</span>
                            </li>,
                        )
                    }
                    { !loading && data && !_.toArray(data.upcoming_hikes).length &&
                        <p>You haven't created any Upcoming Hikes yet!</p>
                    }
                </ul>
            </UpcomingTripStyles>
        );
    }
}

function mapStateToProps(state) {
    const { homepage } = state;
    return {
        homepage,
    };
}

const mapDispatchToProps = dispatch => {
    return {
        getUpcomingTrips: () => {
            dispatch(homepageActions.getUpcomingTrips())
        }
    };
};

const enhance = compose(
    connect(mapStateToProps, mapDispatchToProps),
    withStyles(styles),
);

const connectedUpcomingTrips = enhance(UpcomingTrips);
export { connectedUpcomingTrips as UpcomingTrips };

类UpcomingTrips扩展组件{
componentDidMount（）{
this.props.getUpcomingTrips（）；
}
render（）{
const{classes，homepage}=this.props；
const data=homepage.upcomingTrips.data.coming\u hikes；
常量加载=homepage.upcomingTrips.data.loading；
console.log（'homepage:'，homepage.upcomingTrips.data.uncomingHikes）；
返回(
即将到来的旅行
{加载&&}

{！正在加载&&data&&data.uncoming\u&&
数据。即将到来的徒步旅行。地图（（h）=>

{toDate（h.开始日期）}
{h.name}
，
)
}
{！加载&&&数据&！┱toArray（数据.即将到来的徒步旅行）.长度&&
您尚未创建任何即将进行的徒步旅行

}

);
}
}
函数MapStateTops（状态）{
const{homepage}=state；
返回{
主页
};
}
const mapDispatchToProps=调度=>{
返回{
getUpcomingTrips:（）=>{
分派（homepageActions.getUpcomingTrips（））
}
};
};
常数增强=合成(
连接（mapStateToProps、mapDispatchToProps），
用样式（样式），
);
const connectedUpcomingTrips=增强（上行跳闸）；
导出{connectedUpcomingTrips as UpcomingTrips}；

---

那么，处理这一切的最佳方式是什么？我是否应该考虑使用normalizer之类的工具将数据展平？或者这与我的减速机的工作方式有更多的关系

你到底有什么问题？在你的codeAh道歉中，你似乎处理得很好。当页面试图呈现时，我收到一个错误，告诉我“TypeError:homepage.upcomingTrips.data未定义”。您知道密钥不会立即存在-您需要检查它是否可用。组件必须检查嵌套的数据是否很深，这是正常的吗？也许“正常”在这里甚至不是最好的术语，但也许“理想”？是的，完全有道理。谢谢你的谈话，这非常有帮助。你到底有什么问题？在你的codeAh道歉中，你似乎处理得很好。当页面试图呈现时，我收到一个错误，告诉我“TypeError:homepage.upcomingTrips.data未定义”。您知道密钥不会立即存在-您需要检查它是否可用。组件必须检查嵌套的数据是否很深，这是正常的吗？也许“正常”在这里甚至不是最好的术语，但也许“理想”？是的，完全有道理。谢谢你的谈话，这非常有帮助。