jaredly / jaredly/jaredly.github.io

first list example breaks without a `key` prop

Offen
#15 1 Kommentar 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
9
Forks
12
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

the first example for rendering a list has this code

**TodoApp_2_1.re**
```ocaml
ReasonReact.arrayToElement(Array.of_list(
List.map((item) => , items)
))
```

but although this code will compile correctly, when viewing it in a browser, you'll get the following traceback which hides the fact that the runtime error is to do with `validateExplicitKey`

**`Uncaught TypeError: element._owner.getName is not a function`**

 at validateExplicitKey (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:5636:66)

at validateChildKeys (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:5659:9)
at Object.createElement (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:5747:9)
at newrecord.(anonymous function) (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:6730:39)
at Object._1 (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:1052:12)
at Object.render (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:6250:32)
at finishClassComponent (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:22098:31)
at updateClassComponent (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:22075:12)
at beginWork (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:22449:16)
at performUnitOfWork (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:24440:16)
validateExplicitKey @ bundle.js:5636
validateChildKeys @ bundle.js:5659
createElement @ bundle.js:5747
newrecord.(anonymous function) @ bundle.js:6730
_1 @ bundle.js:1052
render @ bundle.js:6250
finishClassComponent @ bundle.js:22098
updateClassComponent @ bundle.js:22075
beginWork @ bundle.js:22449
performUnitOfWork @ bundle.js:24440
workLoop @ bundle.js:24504
callCallback @ bundle.js:14736
invokeGuardedCallbackDev @ bundle.js:14775
invokeGuardedCallback @ bundle.js:14632
renderRoot @ bundle.js:24582
performWorkOnRoot @ bundle.js:25196
performWork @ bundle.js:25148
requestWork @ bundle.js:25057
scheduleWorkImpl @ bundle.js:24940
scheduleWork @ bundle.js:24902
scheduleTopLevelUpdate @ bundle.js:25373
updateContainer @ bundle.js:25411
(anonymous) @ bundle.js:29428
unbatchedUpdates @ bundle.js:25282
renderSubtreeIntoContainer @ bundle.js:29427
render @ bundle.js:29492
renderToElementWithId @ bundle.js:13825
(anonymous) @ bundle.js:6664
__webpack_require__ @ bundle.js:20
module.exports @ bundle.js:63
(anonymous) @ bundle.js:66
bundle.js:23965 The above error occurred in the component:
in TodoApp

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ bundle.js:23965
captureError @ bundle.js:24756
renderRoot @ bundle.js:24607
performWorkOnRoot @ bundle.js:25196
performWork @ bundle.js:25148
requestWork @ bundle.js:25057
scheduleWorkImpl @ bundle.js:24940
scheduleWork @ bundle.js:24902
scheduleTopLevelUpdate @ bundle.js:25373
updateContainer @ bundle.js:25411
(anonymous) @ bundle.js:29428
unbatchedUpdates @ bundle.js:25282
renderSubtreeIntoContainer @ bundle.js:29427
render @ bundle.js:29492
renderToElementWithId @ bundle.js:13825
(anonymous) @ bundle.js:6664
__webpack_require__ @ bundle.js:20
module.exports @ bundle.js:63
(anonymous) @ bundle.js:66
bundle.js:14782 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
at Object.invokeGuardedCallbackDev (bundle.js:14782)
at invokeGuardedCallback (bundle.js:14632)
at renderRoot (bundle.js:24582)
at performWorkOnRoot (bundle.js:25196)
at performWork (bundle.js:25148)
at requestWork (bundle.js:25057)
at scheduleWorkImpl (bundle.js:24940)
at scheduleWork (bundle.js:24902)
at scheduleTopLevelUpdate (bundle.js:25373)
at Object.updateContainer (bundle.js:25411)
invokeGuardedCallbackDev @ bundle.js:14782
invokeGuardedCallback @ bundle.js:14632
renderRoot @ bundle.js:24582
performWorkOnRoot @ bundle.js:25196
performWork @ bundle.js:25148
requestWork @ bundle.js:25057
scheduleWorkImpl @ bundle.js:24940
scheduleWork @ bundle.js:24902
scheduleTopLevelUpdate @ bundle.js:25373
updateContainer @ bundle.js:25411
(anonymous) @ bundle.js:29428
unbatchedUpdates @ bundle.js:25282
renderSubtreeIntoContainer @ bundle.js:29427
render @ bundle.js:29492
renderToElementWithId @ bundle.js:13825
(anonymous) @ bundle.js:6664
__webpack_require__ @ bundle.js:20
module.exports @ bundle.js:63
(anonymous) @ bundle.js:66

this is easy enough to fix if you use the title as a key (for now at least, or you could horrifically suggest using `List.mapi` and passing...). in any case, the code should probably change to

```diff
ReasonReact.arrayToElement(Array.of_list(
- List.map((item) => , items)
+ List.map((item) => , items)
))
```

at least until the subsequent portion where the items actually do have their own ids.

i tried doing this in a pr, but i'm pretty sure this repo doesn't actually include the original source files and just put stuff here (why not, though, jared??)

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Beginne mit dem Beispiel TodoApp_2_1.re und prüfe, ob seine ursprüngliche Quelle verfügbar ist, da im Issue steht, dass dieses Repository möglicherweise nur generiertes Material enthält. Aktualisiere das Beispiel für die Darstellung der Liste, sodass jedes TodoItem den beschriebenen key hat, und prüfe anschließend, dass der Browser den in bundle.js angezeigten key-bezogenen Fehler nicht mehr meldet.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, ocaml, react
Bereich
documentation, frontend
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.