Inconsistent rendering of errors in List components

オープン
#8,801 コメント 2 件 リアクション 2 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
25/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
react, typescript
領域
frontend

調査の方向性

Storybook の「List / Error in Fetch」ストーリーを開き、List、ReferenceManyField、Datagrid、SimpleList、SingleFieldList で発生する失敗を再現してください。Issue で提案されている責務分担を確認し、一貫性があり重複しないエラー状態と、上書き可能な List のエラーレンダリングを定義して検証してください。実装を完了と見なすには、Issue で動作を決定する必要があります。

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

説明

What you were expecting:

When the dataProvider.getList() call fails, components rendering a list should render something meaningful and consistent.

What happened instead:

  • For fetcher components
    • <List> renders the error messages twice (once in the notification, once in the <Error> component), and if the content component renders it, too, that's three times
    • <ReferenceManyField> renders the notification (no error component)
  • For content components
    • <Datagrid> and <SimpleList> render <ListNoResults>, which is misleading
    • <SingleFieldList> fails.

Besides, in the <List> component, it is not possible to override / hide the <Error> render (cf https://github.com/marmelab/react-admin/issues/8528#issuecomment-1369117499).

Steps to reproduce:

Check the Storybook for List / Error in Fetch : https://react-admin-storybook.vercel.app/?path=/story/ra-ui-materialui-list-list--error-in-fetch

Capture d’écran 2023-04-04 à 06 33 17

Other information:

Which component should handle the error case? In my opinion, just like for the loading case, it's the content components' responsibility (<Datagrid>, <SimpleList>, etc), not the fetcher component (<List>, etc). But I'm open to discussion on this one.

Environment

  • React-admin version: 4.x
  • Last version that did not exhibit the issue (if applicable): n/a
  • React version: 17
  • Browser: Chrome
主要言語
TypeScript
スター
27k
フォーク
5.5k
平均マージ
1日 1時間
マージ済み PR(30日)
33

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

marmelab/react-admin のほかの issue

marmelab/react-admin の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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