React版本:0.0.0-实验性-aae83a4b9
重现步骤
- 如果
<SuspenseList revealOrder="backwards">
预期在早期加载但等待顶部组件时,显示最后要加载的组件。如果设置了tail
属性,它可以正常工作。 - 如果给定
<SuspenseList revealOrder="backwards" tail="collapsed">
,一切按预期工作
<SuspenseList revealOrder="backwards">
<ProfileDetails resource={resource} />
<ErrorBoundary fallback={null}>
<Suspense fallback={<h2>Loading posts...</h2>}>
<ProfileTimeline resource={resource} />
</Suspense>
</ErrorBoundary>
<Suspense fallback={<h2>Loading fun facts...</h2>}>
<ProfileTrivia resource={resource} />
</Suspense>
</SuspenseList>
在尾部添加时正常工作
<SuspenseList revealOrder="backwards" tail="hidden">
<ProfileDetails resource={resource} />
<ErrorBoundary fallback={null}>
<Suspense fallback={<h2>Loading posts...</h2>}>
<ProfileTimeline resource={resource} />
</Suspense>
</ErrorBoundary>
<Suspense fallback={<h2>Loading fun facts...</h2>}>
<ProfileTrivia resource={resource} />
</Suspense>
</SuspenseList>
链接到代码示例:https://codesandbox.io/s/bug-suspenselist-revealordertogether-and-error-boundaries-18429-1oky8
当前行为
<SuspenseList revealOrder="backwards">
等待顶部元素加载,除非设置了tail属性。
预期行为
预期的是,即使没有设置tail属性,倒序工作的顺序也是最后加载的组件处于悬而未决状态。
2条答案
按热度按时间pbossiut1#
你能将这个变成测试套件中的失败测试吗?
6g8kf2rb2#
@gaearon 我尝试创建一个失败的测试用例,但是当我调用Flush和yield时,相同的场景测试用例都能通过。
但是在代码沙箱中
https://codesandbox.io/s/bug-suspenselist-revealordertogether-and-error-boundaries-18429-1oky8
你可以看到,即使trivia被获取并在控制台中记录,它也不会渲染