Svelte參考

執行階段警告

客戶端警告

assignment_value_stale

Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.

假設有以下情況...

<script>
	let object = $state({ array: null });

	function add() {
		(object.array ??= []).push(object.array.length);
	}
</script>

<button onclick={add}>add</button>
<p>items: {JSON.stringify(object.items)}</p>

...當第一次點擊按鈕時，被推送的陣列是賦值右側的 `[]`，但 `object.array` 的結果值是一個空的狀態代理。因此，被推送的值將被丟棄。

您可以將其分為兩個語句來解決此問題

function function add(): voidadd() {
	let object: {
    array: number[];
}object.array: number[]array ??= [];
	let object: {
    array: number[];
}object.array: number[]array.Array<number>.push(...items: number[]): numberAppends new elements to the end of an array, and returns the new length of the array.
@paramitems New elements to add to the array.push(let object: {
    array: number[];
}object.array: number[]array.Array<number>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.
length);
}

binding_property_non_reactive

`%binding%` is binding to a non-reactive property

`%binding%` (%location%) is binding to a non-reactive property

console_log_state

Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead

當記錄一個代理 (proxy) 時，瀏覽器開發工具會記錄代理本身，而不是它所代表的值。在 Svelte 的情況下，`$state` 代理的「目標」可能與其目前的值不符，這可能會造成混淆。

記錄隨著時間變化之值的最簡單方法是使用 `$inspect` 符文。或者，若要一次性記錄 (例如，在事件處理函式內)，您可以使用 `$state.snapshot` 來取得目前值的快照。

event_handler_invalid

%handler% should be a function. Did you mean to %suggestion%?

hydration_attribute_changed

The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value

hydration_html_changed

The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value

The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value

hydration_mismatch

Hydration failed because the initial UI does not match what was rendered on the server

Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%

invalid_raw_snippet_render

The `render` function passed to `createRawSnippet` should return HTML for a single element

legacy_recursive_reactive_block

Detected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.

lifecycle_double_unmount

Tried to unmount a component that was not mounted

ownership_invalid_binding

%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%

ownership_invalid_mutation

Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead

%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead

reactive_declaration_non_reactive_property

A `$:` statement (%location%) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode

在舊版模式中，當它*參考*的狀態發生變化時，`$:` 響應式陳述式會重新執行。這是透過分析程式碼在編譯時決定的。

在符文模式中，當函式*執行*期間讀取的值發生變化時，效果 (effects) 和衍生 (deriveds) 會重新執行。

通常，結果是相同的 - 例如，可以認為這些是等效的

$: let sum: numbersum = let a: numbera + let b: numberb;

const const sum: numbersum = function $derived<number>(expression: number): number
namespace $derivedDeclares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
https://svelte.dev.org.tw/docs/svelte/$derived
@paramexpression The derived state expression$derived(let a: numbera + let b: numberb);

在某些情況下 - 例如觸發上述警告的情況 - 它們*不*相同

const const add: () => numberadd = () => let a: numbera + let b: numberb;

// the compiler can't 'see' that `sum` depends on `a` and `b`, but
// they _would_ be read while executing the `$derived` version
$: let sum: numbersum = const add: () => numberadd();

同樣地，深層狀態的響應式屬性對編譯器不可見。因此，對這些屬性的變更將導致效果和衍生重新執行，但*不會*導致 `$:` 陳述式重新執行。

當您將此元件遷移到符文模式時，行為會相應改變。

state_proxy_equality_mismatch

Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results

`$state(...)` 會建立傳遞給它的值的代理。代理和值具有不同的身分，這表示相等檢查將始終返回 `false`

<script>
	let value = { foo: 'bar' };
	let proxy = $state(value);

	value === proxy; // always false
</script>

若要解決此問題，請確保您正在比較使用 `$state(...)` 建立的兩個值，或兩個值都沒有。請注意，`$state.raw(...)` 將*不會*建立狀態代理。

共用警告

dynamic_void_element_content

`<svelte:element this="%tag%">` is a void element — it cannot have content

state_snapshot_uncloneable

Value cannot be cloned with `$state.snapshot` — the original value was returned

The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:

%properties%

在 GitHub 上編輯此頁面

上一個下一個

執行階段錯誤概觀