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存在但没有{{1属性。

Answer 2

好的，所以这里是我的答案 - 可能你正在使用一些array，因为你正在测试是否详细[0]（如果它是一个数组，为什么它不是复数？）存在。然后测试detail [0]是否包含其他嵌套数组。如果两个测试都通过，则渲染一些项目。

嗯，这在React中绝对是not how you work with arrays。我假设你想做这样的事情：

import has from 'lodash/has'

renderDetail(detail) {
  return has(detail, 'comics.items') && detail.comics.items.length
  ? (
    <div>
      { detail.comics.items.map(item => item) }
    </div>
  )
  : (
    <div>
      No Comic Found
    </div>
  )
}

render() {
  const details = this.props.seriesDetail

  return details.length
  ? (
    <div>
      { details.map(detail => this.renderDetail(detail)) }
    </div>
  )
  : (
    <div>
      No data exist (yet)
    </div>
  )
}

包含两个小测试，并显示嵌套数组项。我不确定这是否能直接回答您的问题，但我强烈建议您使用数组映射并避免使用您使用的方法（测试[0]元素的数组）。

在访问之前检查数据是否存在以防止访问未定义的错误

2 个答案: