Update Reagieren Komponente nach Rendern

Question

Ich benutze react-native-sortable-Listview, um die Reihenfolge der Liste-Element durch Drag & Drop ändern. Nur das Ziehen-Objekt wird erneut gerendert, so dass seine Position aktualisiert wird, aber andere haben ihre vorherige Position. Wenn diese Komponente durch eine andere Ursache wie eine Inkrement-Schaltfläche neu gerendert wird, sind alle Positionen korrekt. Also meine Frage ist, wenn meine react-native-sortable-list gerendert wird, wie kann ich das nochmal rendern. Beide Möglichkeiten zum Rendern von forceUpdate() und this.setState(), konnte ich nicht folgen, wie ich Zustand in Render-Funktion nicht aktualisieren kann. Was kann ein möglicher Weg sein, dies zu tun.

Answer 1

Versuchen componentWillMount oder componentDidMount mit:

componentWillMount =() => { 
    this.setState({ 
    data: myData 
    }); 
} 

Im Grunde gleich in welcher Phase Ihrer Komponente gerendert Sie müssen dieses Ereignis erfassen und rufen setState(); Sie können das Rendering auch über eine Schaltfläche durchführen. Der Benutzer klickt auf eine Schaltfläche. Anschließend setzen Sie setState(); Hoffe das hilft!

Answer 2

Ich kenne diese Liste nicht, aber es sollte eine Eigenschaft wie onDrop oder etwas ähnliches sein. Sie können eine Funktion an diesen Event-Handler übergeben, der möglicherweise die Liste sortiert, die Sie übergeben.

ist es diese Liste?

https://www.npmjs.com/package/react-native-sortable-list

ich würde versuchen, was die onReleaseRow Ereignishandler tut. Vielleicht so etwas wie:

<SortableList onReleaseRow{() => this.sortList() data={this.state.data}}/> 

sortList() { 
let sortedData = //sort data somehow 
this.setState({ 
    data: sortedData}) 
} 

Answer 3

Sie könnten eine reRender Funktion nach unten auf Ihre sortierbare Liste übergeben. ReactNativeList akzeptiert einen Prop namens onChangeOrder, der bei jeder Änderung der Zeilenreihenfolge aufgerufen wird.

class ParentComponent extends Component { 
    reRender =() => { 
     this.forceUpdate() 
    } 

    render() { 
     return <ReactNativeList onChangeOrder={this.reRender} /> 
    } 
} 

Answer 4

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.