jaredly / jaredly/jaredly.github.io

first list example breaks without a `key` prop

Aperta
#15 1 commento 4 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
9
Fork
12
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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??)

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Direzione di ricerca

Inizia con l’esempio TodoApp_2_1.re e verifica se il suo codice sorgente originale è disponibile, poiché l’issue indica che questo repository potrebbe contenere solo materiale generato. Aggiorna l’esempio di rendering dell’elenco in modo che ogni TodoItem abbia il key descritto, quindi verifica che il browser non segnali più l’errore relativo a key mostrato in bundle.js.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, ocaml, react
Ambito
documentation, frontend
Tipo di issue
Documentazione
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.