[React] Dynamische elementen herorderen verkeerd

[Devilly]

Op het moment ben ik bezig om met React een sorteerbare lijst te maken. Simpel gezegd komt het hierop neer:

HTML:

<ul>
  <li id="1">1</li>
  <li id="2">2</li>
</ul>

De ul en li's hebben eigen React componenten, waarbij het component van de li's wordt aangeroepen vanuit het component van de ul. Ik maak de lijst sorteerbaar door Sortable op de ul aan te roepen. Zodra de volgorde van de li's is gewijzigd, haal ik de nieuwe volgorde op door middel van toArray en sla ik deze op. Stel dat de gebruiker de li's heeft versleept en dit het resultaat is:

HTML:

<ul>
  <li id="2">2</li>
  <li id="1">1</li>
</ul>

Het gebeurt, volgens mij, altijd dat een nieuwe render van de componenten daarna weer de oude situatie [1, 2] oplevert, ondanks dat de data die bij de render wordt gebruikt de nieuwe situatie [2, 1] representeert:

HTML:

<ul>
  <li id="1">1</li>
  <li id="2">2</li>
</ul>

De ReactElement'en die ik retourneer vanuit render staan net als de aangeleverde data in de juiste volgorde [2, 1]. De li's krijgen unieke keys, zoals staat beschreven in de officiële documentatie. Het toepassen van Sortable op de lijst lijkt het probleem ook niet te zijn. Het toepassen hiervan gebeurt namelijk in de componentDidMount en componentDidUpdate methodes en de hersortering gebeurt direct nadat ik een waarde return in render. Dat heb ik gezien tijdens het debuggen in Chrome.

Wat ik verder nog heb bekeken, is of de data-reactid's in de HTML op de goede plekken staan en dat is ook het geval. Hierna wist ik niet meer waar te kijken en vond ik het tijd om jullie kennis te raadplegen.

[.oisyn]

-> Webdesign, Markup & Clientside Scripting

[eXtreaL]

Waar sla je de data op, doe je dit in de state? Als je een console.log doet op je data in de render functie, wordt de data dan wel in de juiste volgorde getoond?

Het is misschien handig om een JSFiddle oid te uploaden. JSFiddle heeft sinds kort ook ondersteuning voor React components (voorbeeld: https://jsfiddle.net/xLv27np7/).

[Devilly]

De data komt inderdaad in de state te staan. Die staat in de goede volgorde, net als dat het resultaat van render in de goede volgorde is:

De ReactElement'en die ik retourneer vanuit render staan net als de aangeleverde data in de juiste volgorde [2, 1].

Na wat googlen blijkt dat het aanpassen van de HTML door Sortable niet goed wordt opgepikt door React ondanks dat React de data-reactid's heeft om de elementen te herkennen. Hier houd ik nu rekening mee door Sortable af te breken voordat deze de HTML definitief wijzigt waarna ik via React de nieuwe volgorde zet. Dit doe ik door in de stop methode van Sortable toArray te gebruiken om de nieuwe volgorde te verkrijgen, daarna cancel aan te roepen en vervolgens de state van de ul te zetten met het resultaat van toArray.

[eXtreaL]

Ik zie nu pas dat je het over Sortable binnen jQuery UI hebt. Zorgt het niet voor enorm veel overhead om zowel React als jQuery icm jQuery UI in te laden? Ik weet niet voor wat voor toepassing het is bedoeld, maar ik zou overwegen om iets van een lichter kaliber als Sortable in te zetten (initieel dacht ik dat je het over deze library had). Na even zoeken zie ik dat er zelfs een React component voor het sorteren van een lijst bestaat.

Als je toch bij jQuery UI blijft, zou ik er eerst voor zorgen dat je zeker weet dat de Sortable functie je DOM niet aanpast. DOM aanpassingen wil je in dit geval uitsluitend door React laten afhandelen door middel van een render bij een state change. Als je er niet uitkomt ben ik bereid je te helpen, maar dan wel aan de hand van een JSFiddle of broncode.