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

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

React版本:0.0.0-实验性-aae83a4b9

重现步骤

  1. 如果<SuspenseList revealOrder="backwards">预期在早期加载但等待顶部组件时,显示最后要加载的组件。如果设置了tail属性,它可以正常工作。
  2. 如果给定<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属性,倒序工作的顺序也是最后加载的组件处于悬而未决状态。

pbossiut

pbossiut1#

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

6g8kf2rb

6g8kf2rb2#

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

相关问题