React Native 列表视图处理 Null

Question

我正在使用 API 无论如何都会 return 10 个对象，即使只有 2 个结果。所以 return 值看起来像这样：

[[object], [object], [null], [null], [null], [null], [null], [null], [null], [null]]

这会导致列表视图出现问题，因为它需要值。

目前我是这样处理的：

renderRow(rowData) {
  if (rowData === null) { return <View></View>; };

  return (
    <SearchListItem
      title={ rowData.strProductName }
      price={ rowData.dblProductPrice }
      salePrice={ rowData.dblProductSalePrice }
      imageUrl={ rowData.strLargeImage }
      handleShare={ this._handleShare.bind(this) }
    />
  );
}

在我看来，只是return一个空视图有点老套。

有没有更好的方法来处理这个问题？

Answer 1

您可以预处理模型数据并跳过在视图之间切换的需要：

var processed = _.map(rowData, (r) => {
    if (r === null)
        return { // contents of 'empty' model };
    else
        return r;
});

但是您希望视图中出现空行吗？如果不是，那么您应该使用 _.filter。如果是这样，那么 IMO，您现在的做法是合适的方式。

React Native 列表视图处理 Null

React Native List View handle Null

react-native