javascript - 访问前检查数据是否存在，防止访问未定义错误

Question

我正在使用 React 来访问从 API 返回的一些数据。下面的代码可以工作，但看起来确实是重复的。有没有更好的方法来执行此操作，以便我不会因访问 null 属性而意外收到错误？

renderComicList() {
    var detail = this.props.seriesDetail;

    if (!detail || !detail[0] || !detail[0].comics || !detail[0].comics.items) {
        return (
            <div>No data exist (yet)</div>
        )
    }

    if (detail[0].comics.items.length === 0) {
        return (
            <div>No Comic Found</div>
        )
    }

    return (
        <div>
            {detail[0].comics.items[0]}
        </div>
    )
}

Answer 1

如果这些条件中的每一个都存在，则不可以，除非使用错误处理:

renderComicList() {
    var items;

    try {
        items = this.props.seriesDetail[0].comics.items;
    }
    catch (e) {
    }
    if (!items) {
        return <div>No data exist (yet)</div>;
    }

    if (!items.length) {
        return (
            <div>No Comic Found</div>
        )
    }

    return (
        <div>
            {items[0]}
        </div>
    )
}

我添加了对原始代码未处理的两种情况的处理:detail[0].comics 存在，但 detail[0].comics.items 不存在，并且 detail[0].comics.items 存在，但没有 length 属性。