Position von Alle Orte in react-native-sortable-listview aktualisieren

Question

Ich verwende react-native-sortable-listview in reaktiv-nativ für die Sortierung derselben Orte.

constructor() { 
    this.state = { 
    makers: [ 
     { kolkata: 'Hawrah Birdge' }, 
     { Delhi: 'Lal Kila' }, 
     { Agra: 'Taj Mahal' }, 
     { Mumbai: 'India Gate' }, 
    ], 
    allObj: {}, 
    order: [] 
    }; 
} 
componentDidMount() { 
    const newAllObj = this.getAllObjFromMaker(this.state.makers); 
    const newOrder = this.getOrderFromMaker(newAllObj); 
    this.setState({ allObj: newAllObj, order: newOrder }); 
} 
getAllObjFromMaker(makers) { 
    const allObj = makers.reduce((result, d) => { 
    result[`${d.coordinate.latitude}_${d.coordinate.longitude}`] = d; 
    return result; 
    }, {}); 
    return allObj; 
} 
getOrderFromMaker(allObj) { 
    const order = Object.keys(allObj); 
    return order; 
} 
renderOneDraggableMilestone(milestone) { 
    const i = this.state.makers.indexOf(milestone); 
    return (
    <TouchableOpacity {...this.props.sortHandlers}> 
     <Text>{i + 1}</Text>   
     <Text>{milestone.address}</Text> 
    </TouchableOpacity> 
    ); 
    } 
    arrangedMilestoneList(e) { 
    const arr = this.state.makers; 
    arr.splice(e.to, 0, arr.splice(e.from, 1)[0]); 
    const newAllObj = this.getAllObjFromMaker(arr); 
    const newOrder = this.getOrderFromMaker(newAllObj); 
    this.setState({ makers: arr, allObj: newAllObj, order: newOrder 
    }); 
    } 
render() { 
    return (
    <SortableListView 
     data={this.state.allObj} 
     order={this.state.order} 
     activeOpacity={0.5} 
     onRowMoved={e => { 
     this.arrangedMilestoneList(e); 
     this.forceUpdate(); 
     }} 
     renderRow={(row) => this.renderOneDraggableMilestone(row)} 
    /> 
    );  
} 

Ich mag Orte ordnen und ihre Position auch in this.state.makers als I i in renderOneDraggableMilestone tun verwenden. Auf renderRow wird nur ein ziehbarer Platz gerendert, sodass nur deren Position aktualisiert wird. Und RenderRow ist der Letzte, um zu forcieren, so dass ForceUpdate auch nicht funktioniert.

Wie wird nach dem Ausführen von renderRow neu gerendert. So könnte alle Position aktualisiert werden.

Answer 1

Ok Ich habe einen Weg gefunden, um wie folgt zu rendern.

<SortableListView 
    key={this.state.count} 
    data={this.state.allObj} 
    order={this.state.order} 
    activeOpacity={0.5} 
    onRowMoved={e => { 
    this.setState({ count: this.state.count + 1 }); 
    this.props.arrangedMilestoneList(e); 
    console.log('onRowMoved is called'); 
    }} 
    onMoveEnd={() => console.log('onMoveEnd is fired')} 
    renderRow={(row, s1, i) => this.renderOneDraggableMilestone(row, s1, i)} 
/> 

Was ich tue, ist ich ein Schlüsselattribut zu SortableListView hinzugefügt und aktualisieren Sie diese Schlüssel auf jedem onRowMoved Aktion. Und deswegen verursacht es das Rendern.