react Bug:如果没有尾部属性,SuspenseList revealOrder="backwards" 的一致性将不一致,

qxgroojn  于 8个月前  发布在  React
关注(0)|答案(2)|浏览(100)

React版本:0.0.0-实验性-aae83a4b9

重现步骤

  1. 如果<SuspenseList revealOrder="backwards">预期在早期加载但等待顶部组件时,显示最后要加载的组件。如果设置了tail属性,它可以正常工作。
  2. 如果给定<SuspenseList revealOrder="backwards" tail="collapsed">,一切按预期工作
  1. <SuspenseList revealOrder="backwards">
  2. <ProfileDetails resource={resource} />
  3. <ErrorBoundary fallback={null}>
  4. <Suspense fallback={<h2>Loading posts...</h2>}>
  5. <ProfileTimeline resource={resource} />
  6. </Suspense>
  7. </ErrorBoundary>
  8. <Suspense fallback={<h2>Loading fun facts...</h2>}>
  9. <ProfileTrivia resource={resource} />
  10. </Suspense>
  11. </SuspenseList>

在尾部添加时正常工作

  1. <SuspenseList revealOrder="backwards" tail="hidden">
  2. <ProfileDetails resource={resource} />
  3. <ErrorBoundary fallback={null}>
  4. <Suspense fallback={<h2>Loading posts...</h2>}>
  5. <ProfileTimeline resource={resource} />
  6. </Suspense>
  7. </ErrorBoundary>
  8. <Suspense fallback={<h2>Loading fun facts...</h2>}>
  9. <ProfileTrivia resource={resource} />
  10. </Suspense>
  11. </SuspenseList>

链接到代码示例:https://codesandbox.io/s/bug-suspenselist-revealordertogether-and-error-boundaries-18429-1oky8

当前行为

<SuspenseList revealOrder="backwards">等待顶部元素加载,除非设置了tail属性。

预期行为

预期的是,即使没有设置tail属性,倒序工作的顺序也是最后加载的组件处于悬而未决状态。

pbossiut

pbossiut1#

你能将这个变成测试套件中的失败测试吗?

6g8kf2rb

6g8kf2rb2#

@gaearon 我尝试创建一个失败的测试用例,但是当我调用Flush和yield时,相同的场景测试用例都能通过。
但是在代码沙箱中
https://codesandbox.io/s/bug-suspenselist-revealordertogether-and-error-boundaries-18429-1oky8
你可以看到,即使trivia被获取并在控制台中记录,它也不会渲染

相关问题