为什么上下文在 svelte 中未定义答案

【问题标题】：why context is undefined in svelte为什么上下文在 svelte 中未定义
【发布时间】：2020-11-23 08:45:29
【问题描述】：

我正在开发一个组件，我需要为它使用上下文。但我不知道为什么当我使用 getContext 时，它是未定义的。

这是我在第一个组件（索引组件）上的代码的一部分：

import { setContext } from 'svelte';
import {onMount} from "svelte";

let tempSuggest;

const suggestModel = {
   category_id: 1,
   title: "",
   images: [{}],
   catalogues: [{}],
   dependent_attributes: [{}],
   independent_attributes: [{}],
};

$: tempSuggest = Object.assign({}, suggestModel);

onMount(() => {
   setContext(clientProductSuggest, tempSuggest);
});

在第一个组件的html代码中（在索引文件末尾加载子组件）：

<svelte:component this={component} {...props}/>

在第二个组件中：

import { getContext } from 'svelte';
const c = getContext('clientProductSuggest');

console.log(c);

现在上下文未定义。

【问题讨论】：

标签： javascript svelte svelte-3

【解决方案1】：

这是因为 Svelte 中的 contexts 默认情况下不是响应式的，当您将 tempSuggests 分配给上下文时，它实际上是 undefined

为了在您的上下文中获得反应性，您应该创建 tempSuggests 作为商店：

import { setContext } from 'svelte';
import { writable } from "svelte/store";

let tempSuggest = writable({});

const suggestModel = {
   category_id: 1,
   title: "",
   images: [{}],
   catalogues: [{}],
   dependent_attributes: [{}],
   independent_attributes: [{}],
};

$: tempSuggest.update(value => Object.assign(value, suggestModel));
setContext('clientProductSuggest', tempSuggest);

还要考虑以下几点：

setContext 不必在 onMount 内部调用
setContext的第一个参数应该是一个字符串（我加了''）
suggestModel 现在是一家商店，孩子们也应该这样对待

【讨论】：

我已经使用了你的代码，但是为什么当我在setContext之后在控制台中记录上下文时，在get方法中没有向我显示suggestModel？
我想让我的临时变量为空并且看起来像建议模型，当页面加载或用户按下取消按钮时，需要更新上下文。
当你说“在 setContext 之后记录上下文”是在孩子身上，在做 getContext 之后吗？因为那时你还没有更新 tempSuggest

【解决方案2】：

可能它不会涵盖这个问题，但请记住，getContext 仅适用于“setContenxt 组件”的子级。对于跨组件共享，我们应该使用商店。

我正在写这个答案，因为如果我在这里找到它，它将节省我几个小时的搜索时间并在苗条的社区聊天中写一条消息。

【讨论】：