2017-01-19 2 views
1

행이 내 목록보기에 추가 될 때 이상한 동작이 발생합니다. 나는 나의 논리가 잘못된 곳인지 확신하지 못한다. 나는 반응 네이티브 탭보기를 사용하는 탭이 있습니다. 내가React-Native listview를 업데이트하는 방법은 무엇입니까?

Before

표시되는 내용이있는 개체를 추가하기 전에 탭 2에 나는 내가 개체를 추가하고 다시 이동 한 후 탭 (4)에 표시되고있다 "즐겨 찾기"배열에 객체를 추가하고 탭 4이 내가 볼 나는 무엇

after

그리고 코드

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) 

constructor(props) { 
    super(props) 
    this.state = { 
     favoriteDB: props.favorites, 
     renderPlaceholder: true, 
     dataSource: ds.cloneWithRows([]) 
    } 
    } 

componentDidMount() { 
    InteractionManager.runAfterInteractions(() => { 
     this.setState({ 
     dataSource: ds.cloneWithRows(this.state.favoriteDB), 
     renderPlaceholder: false 
     }) 
    }) 
    } 

    componentWillReceiveProps(prevProps) { 
    const {favorites} = this.props 

    if (JSON.stringify(favorites) != JSON.stringify(prevProps.favorites)) { 
     this._updateFavorites() 
    } 
    } 

    _updateFavorites() { 
    const {favorites} = this.props 

    this.setState({ 
     favoriteDB: favorites, 
     dataSource: ds.cloneWithRows(favorites) 
    }) 
    } 

render() { 
    const {dataSource} = this.state 
    const {visibleHeight, visibleWidth} = this.props 

    if (this.state.renderPlaceholder) 
     return <Placeholder/> 

    return (
     <Container theme={theme}> 
     <View style={{ flex:1, height: visibleHeight - 100, width: visibleWidth }}> 
      <Row> 
      <Col> 
       <List> 
       <ListView 
        style={{ height: visibleHeight - 100, width: visibleWidth }} 
        enableEmptySections={TRUE} 
        automaticallyAdjustContentInsets={FALSE} 
        initialListSize={100} 
        pageSize={100} 
        dataSource={dataSource} 
        renderRow={rowData => this._renderRow(rowData)}/> 
       </List> 
      </Col> 
      </Row> 
     </View> 
     </Container> 
    ) 
    } 
+0

을 참조하면 당신'을 console.log (즐겨 찾기)', 당신이 항목의 전체 배열하거나 추가를 받고 있습니까? –

+0

전체 배열 – texas697

+0

@MattAft 'BAKER, MARLENE J'위의 의심스러운 공간, 저게 뭐지? –

답변

0

나는 t을 경험 cloneWithRows의 입력에 행을 추가 및 제거하고 ListView이라는 새 데이터 배열과 새로운 SectionList의 데이터 배열을 추가합니다.

제 해결 방법은 DataSource가 변경되면 (이름 및 크기가 변경됨) 변경되는 ListView의 키를 추가하는 것입니다.

return (
    <SectionList 
     key={"mylistview_" + this.props.maps.length} 
     style= 
    ... 

_updateFavorites에서 https://stackoverflow.com/a/31481960/7223