小编rre*_*err的帖子

我在 SSR 应用程序的初始加载时收到此错误：Warning: Text content did not match. Server: "SOME DATA" Client: "Loading..." 如何在不将loading标志设置为 true 的情况下初始化应用程序的 客户端？

我正在使用 react、express 和 apollo 设置 SSR。我从渲染器服务器获得了一个正确渲染的 HTML 数据，但是当客户端包加载时，它试图重新获取数据。Hydration 已设置，并且来自渲染器服务器的所有数据都被注入到页面的 HTML 中。

/index.js

<Query query={GET_USERS} variables={queryVariables}>
    {({
        loading,
        error,
        data
    }) => {
        if (loading) return <p>Loading...</p>;
        if (error) return `Error: ${error}`;
        return data.users.map(user => <p key={user.id}>{user.login}</p>);
    }}
</Query>

/renderer.js

export default async (req, client) => {
    const serverSideApp = (
        <ApolloProvider client={client}>
            <StaticRouter location={req.path} context={{}}>
                <div>{renderRoutes(RoutesList)}</div>
            </StaticRouter>
        </ApolloProvider>
    );
        return …

我有一个在表单中使用的自定义输入验证组件。大约有 15 个围绕应用程序的组件实例。它有一个beforeDestroy方法，在该方法中我取消订阅全局事件triggerGlobalValidation，该事件在我向服务器发送请求之前触发验证。正如预期的那样，它仅在此特定组件内触发一次。

有一个带有v-if参数的容器，其中包含该组件的一个实例。所以当v-if="false"我期望这个特定的组件取消订阅事件并被销毁时。接受一件事很顺利：不知何故，这个组件也从事件中取消订阅它的所有其他实例triggerGlobalValidation。

我已经测试了行为v-show并且它按预期工作 - 所有其他实例都保持订阅，但是由于v-show表单需要该字段，因此即使没有在 DOM 中显示，它也会阻止验证。我还通过删除 测试了上述组件的行为this.$root.$off("triggerGlobalValidation")，它也按预期工作+污染全局根。

$off 方法的 Vue 文档说：

如果未提供任何参数，则删除所有事件侦听器；

如果仅提供事件，则删除该事件的所有侦听器；

如果同时提供事件和回调，则仅删除该特定回调的侦听器。

是否有可能在回调中以某种方式提及，此$off方法不应该从事件中取消订阅其所有实例，而只是将这个特定的实例销毁？

在代码沙盒中查看