jaredly / jaredly/jaredly.github.io

first list example breaks without a `key` prop

オープン
#15 コメント 1 件 リアクション 4 件 担当者 0 名 GitHub で見る
主要言語
JavaScript
スター
9
フォーク
12
PR マージ指標
30日以内にマージされた PR はありません

説明

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

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

TodoApp_2_1.re の例から始め、元のソースが利用可能かどうかを確認してください。この issue には、このリポジトリには生成されたマテリアルしか含まれていない可能性があると書かれています。リストレンダリングの例を更新し、各 TodoItem に説明されている key が設定されるようにしてから、ブラウザーに bundle.js に表示されている key 関連のエラーが表示されなくなったことを確認してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, ocaml, react
領域
documentation, frontend
issue の種類
ドキュメント
難易度
2/5
見積もり時間
1〜3時間
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。