更新所有位置在可反应列表中的所有位置

Question

我正在使用反应式列表中的反应词，用于对同一位置进行排序。

 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中使用i时安排位置和他们在this.state.state.state.state中的位置。在Renderrow上，只有可拖动的位置是渲染的，因此只有其位置被更新。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操作上更新此密钥。因此，它会导致重新渲染。