1

在下面的代码中，Sample使用一个async函数来获取一些数据。我将使用这些数据来更新 Redux 存储，以便任何组件都可以username在应用程序中访问它们。

const resource = fetchData();

function Sample() {
    // throws a promise when retrieving data
    const name = resource.read();

    const dispatch = useDispatch();
    dispatch(setUsername(name));

    const username = useSelector((state) => state.username);

    return <div>User: {username}</div>;
}

<Suspense fallback="loading....">
    <Sample />
</Suspense>

在这里，让我们假设没有用户名我的应用程序无法继续。好吧，<Suspense>在父级别实现这一点，直到从资源中获取数据。但是，从 Redux 事件调度到<Sample>组件重新渲染之间存在细微差距，其中显示User:而不是loading....（事件不强制立即重新渲染，因此username为空）。所以我会以相同的顺序在网页中看到以下内容

loading....--> User:-->User: Srinesh

所以我的要求是在loading....商店更新之前显示。在网页上，我期待看到，

loading....-->User: Srinesh

有没有办法在不使用<Sample>组件级别的另一个条件来显示loading....用户名是否为的情况下实现这一点null？

4

1 回答 1

1

第一个问题是在组件渲染逻辑的中间调度是一个副作用，你绝不能这样做。

一个更安全的地方是一个useLayoutEffect钩子，它会在组件完成渲染后立即调度，但在浏览器有机会绘制之前强制同步重新渲染。这样你就不会看到闪光了。

于 2021-08-05T18:44:16.027 回答