10

我有一个带有 3 个选项卡的模式。每个选项卡都有一个列表视图，任何大于 10 行的数据集都无法正常工作。发生的情况是在初始加载时它正确显示。但是，当显示更多行时，它们都是空的。不知道发生了什么。使用最新的 React-Native。如果有帮助，这里有几个屏幕截图。

图 1图二图 3

 <View style={{flex:1, height: this.state.visibleHeight - 100, width: this.state.visibleWidth }}>
    {
      (this.state.isSubdivisions) ? <Subdivisions model={this.props.model.subdivisions}/>
      : (this.state.isProspects) ? <LandProspects model={this.props.model.landProspects}/>
      : (this.state.isFavorites) ? <Favorites model={this.props.model.favorites}/>
      : null}
</View>

标签

class ListLandProspects extends Component {
  constructor(props) {
    super(props);
    const foo = this.props.model.slice(0,10)
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    this.state = {
      dataSource: ds.cloneWithRows(foo),
      deviceHeight: Dimensions.get('window').height,
      deviceWidth: Dimensions.get('window').width
    }
  }

  componentDidUpdate(prevProps) {
    if (this.props.model != prevProps.model)
    this._updateLandProspects()
  }

  _updateLandProspects(){
    const clone = this.props.model.slice()
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(clone)
    })
  }

  render() {
    return (
      <Row>
        <Col>
          <List>
            <ListView
              style={{ height: this.state.visibleHeight - 100, width: this.state.visibleWidth }}
              enableEmptySections={true}
              initialListSize={10}
              pageSize={10}
              dataSource={this.state.dataSource}
              renderRow={this._renderRow.bind(this)} />
          </List>
        </Col>
      </Row>
    )
  }

  _renderRow(rowData) {
    return (
      <ListItem style={styles.listItem}>
        <View style={styles.rowWrapper}>
          <Row>
            <Col>
              <Text style={styles.labelMain}>{rowData.fullAddress}</Text>
            </Col>
          </Row>
          <Row style={styles.toolbarRow}>
            <View style={styles.toolbarDetail}>
              <TouchableOpacity>
                <Icon
                  name='ios-information-circle'
                  style={{color: colors.blue}}/>
              </TouchableOpacity>
            </View>
            <View style={styles.toolbarMarker}>
              <TouchableOpacity>
                <Icon
                  name='ios-pin'
                  style={{color: colors.green}}/>
              </TouchableOpacity>
            </View>
            <View style={styles.toolbarFavorite}>
              <TouchableOpacity>
                <Icon
                  name={rowData.isFavorite ? 'ios-star' : 'ios-star-outline'}
                  style={{color: colors.orange}}/>
              </TouchableOpacity>
            </View>
          </Row>
        </View>
      </ListItem>
    )
  }
}


ListLandProspects.propTypes = {
  model: React.PropTypes.array
}

export default connect(null, null)(ListLandProspects)

风格

const styles = StyleSheet.create({
  label: {
    color: '#000',
    fontWeight: 'bold'
  },
  labelMain: {
    color: '#000',
    fontWeight: 'bold',
    fontSize: 15
  },
  rowWrapper: {
    padding: 5,
    paddingLeft: 10,
    paddingRight: 10
  },
  listItem: {
    padding: 0,
    marginLeft: 0,
    paddingLeft: 0,
    borderBottomWidth: 0,
    borderColor: 'transparent'
  },
  toolbarRow: {
    height: 38,
    marginTop: 5,
    backgroundColor: '#f2f2f2'
  },
  toolbarFavorite: {
    position: 'absolute',
    margin: 5,
    left: 110
  },
  toolbarMarker: {
    position: 'absolute',
    margin: 5,
    left: 60
  },
  toolbarDetail: {
    position: 'absolute',
    margin: 5

  }
})
4

1 回答 1

2

任何大于 10 行的数据集都无法正常工作

几乎可以肯定与这条线有关：

const foo = this.props.model.slice(0,10)

编辑：

我认为你componentDidUpdate的有缺陷。this.props.model != prevProps.model将永远是true，因为你不能像那样比较数组。所以_updateLandProspects会在每次更新时调用，这将重新设置你的状态，因为你有一个initialListSize你10可能永远不会看到超过这个数字，因为它会一遍又一遍地导致另一个渲染。

尝试更改initialListSize为更大的数字并删除slice(0, 10)上面的内容，看看它的行为是否与现在相同，但数字更大。这应该显示问题是否与componentDidUpdate缺陷有关。

于 2017-01-03T22:35:58.183 回答