react-native-sortable-listview内のすべての場所の位置を更新

Question

同じ場所をソートするためにreact-native-sortable-listviewをreact-nativeで使用しています。

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)} 
    /> 
    );  
} 

私はrenderOneDraggableMilestoneに私を使用してやっているような場所を手配してもthis.state.makers内の位置にしたいです。 renderRowでは、ドラッグ可能な場所だけがレンダリングされ、その位置だけが更新されます。レンダリングは最後に実行されるので、forceUpdateも機能しません。

renderRowの実行後に再レンダリングする方法。したがって、すべてのポジションを更新することができます。

Answer 1

私は次のように再レンダリングする方法を見つけました。私がやっている何

<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)} 
/> 

は、私がSortableListViewにキー属性を追加し、各onRowMovedアクションにこのキーを更新しています。これにより、再レンダリングが発生します。