## 
客户警告

### 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.
```

给定一个这样的案例...

```svelte
<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` 的結果是一個空狀態代理。因此，推送的值將被丟棄。

您可以通过将其分为两个语句来修复此问题：

```js
let object = { array: [0] };
// ---cut---
function add() {
	object.array ??= [];
	object.array.push(object.array.length);
}
```

### await\_reactivity\_loss

```
Detected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await`
```

Svelte 的基于信号的响应性是通过跟踪模板或`$derived(...)`表达式执行时读取哪些状态位来工作的。如果一个表达式包含一个`await`，Svelte 会将其转换，以便跟踪`await`之后的任何状态*之后*——换句话说，在这种情况下……

```js
let a = Promise.resolve(1);
let b = 2;
// ---cut---
let total = $derived(await a + b);
```

...两个`a`和`b`都被跟踪，即使`b`只在`a`解决后读取一次，在初始执行之后。

这并不适用于表达式内部不可见的 *await*。在这种情况下...

```js
let a = Promise.resolve(1);
let b = 2;
// ---cut---
async function sum() {
	return await a + b;
}

let total = $derived(await sum());
```

...`total` 将取决于 `a`（立即读取）但不取决于 `b`（不读取）。解决方案是将值传递给函数：

```js
let a = Promise.resolve(1);
let b = 2;
// ---cut---
/**
 * @param {Promise<number>} a
 * @param {number} b
 */
async function sum(a, b) {
	return await a + b;
}

let total = $derived(await sum(a, b));
```

### await\_waterfall

```
An async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app
```

在这种情况下...

```js
async function one() { return 1 }
async function two() { return 2 }
// ---cut---
let a = $derived(await one());
let b = $derived(await two());
```

...第二个`$derived`将在第一个解决后创建。由于`await two()`不依赖于`a`的值，这种延迟，通常描述为“瀑布”，是不必要的。

（请注意，如果 `await one()` 和 `await two()` 的值随后更改，它们可以同时更改——瀑布效应仅在派生值首次创建时发生。）

您可以通过先创建承诺并在 *之后* 等待它们来解决此问题：

```js
async function one() { return 1 }
async function two() { return 2 }
// ---cut---
let aPromise = $derived(one());
let bPromise = $derived(two());

let a = $derived(await aPromise);
let b = $derived(await bPromise);
```

### 
绑定属性非响应式

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

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

### 
控制台日志状态

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

当记录一个 [代理](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 时，浏览器开发者工具将记录代理本身而不是它所代表的值。在 Svelte 的情况下，`$state` 代理的 'target' 可能与其当前值不相似，这可能会造成困惑。

最简单的方法记录值随时间变化的情况是使用 [`$inspect`](/docs/svelte/$inspect) 符文。或者，为了一次性记录某些内容（例如，在事件处理器内部），可以使用 [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) 来获取当前值的快照。

### 
事件处理程序无效

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

### 
水合属性已更改

```
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
```

某些属性，如`src`在`<img>`元素上，在激活过程中不会被修复，即服务器值将被保留。这是因为更新这些属性可能会导致图像被重新获取（或者在`<iframe>`的情况下，框架被重新加载），即使它们解析为相同的资源。

要修复这个问题，可以通过添加一个 [`svelte-ignore`](basic-markup#Comments) 注释来静音警告，或者确保服务器和客户端之间的值保持一致。如果你真的需要在恢复时更改值，可以强制更新如下：

```svelte
<script>
	let { src } = $props();

	if (typeof window !== 'undefined') {
		// stash the value...
		const initial = src;

		// unset it...
		src = undefined;

		$effect(() => {
			// ...and reset after we've mounted
			src = initial;
		});
	}
</script>

<img {src} />
```

### 
水合\_html\_已更改

```
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
```

如果服务器和客户端之间的 `{@html ...}` 值发生变化，则在活化过程中不会进行修复，即保留服务器值。这是因为活化过程中的变更检测成本高昂且通常不必要。

要修复这个问题，可以通过添加一个 [`svelte-ignore`](basic-markup#Comments) 注释来静音警告，或者确保服务器和客户端之间的值保持一致。如果你真的需要在恢复时更改值，可以强制更新如下：

```svelte
<script>
	let { markup } = $props();

	if (typeof window !== 'undefined') {
		// stash the value...
		const initial = markup;

		// unset it...
		markup = undefined;

		$effect(() => {
			// ...and reset after we've mounted
			markup = initial;
		});
	}
</script>

{@html markup}
```

### 
水分不匹配

```
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%
```

此警告在 Svelte 遇到从服务器加湿 HTML 时发生错误时抛出。在加湿过程中，Svelte 遍历 DOM，期望一定的结构。如果该结构不同（例如，由于 HTML 因无效 HTML 而被 DOM 修复），则 Svelte 将遇到问题，导致出现此警告。

在开发过程中，此错误通常由一个`console.error`先导，详细说明了需要修复的有问题的 HTML。

### 
无效的原始代码片段渲染

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

### 
遗产递归响应块

```
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`.
```

### 
生命周期\_double\_unmount

```
Tried to unmount a component that was not mounted
```

### 
无效的所有权绑定

```
%parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)
```

考虑三个组件 `GrandParent`、`Parent` 和 `Child`。如果您执行 `<GrandParent bind:value>`，在 `GrandParent` 内部通过 `<Parent {value} />`（注意缺少 `bind:`）传递变量，然后在内 `<Child bind:value>` 的 `Parent` 内部执行，则会抛出此警告。

要修复它，将 `bind:` 绑定到值，而不是仅仅传递一个属性（即在这个例子中执行 `<Parent bind:value />`）。

### 
无效所有权突变

```
Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead
```

考虑以下代码：

```svelte
<!--- file: App.svelte --->
<script>
	import Child from './Child.svelte';
	let person = $state({ name: 'Florida', surname: 'Man' });
</script>

<Child {person} />
```

```svelte
<!--- file: Child.svelte --->
<script>
	let { person } = $props();
</script>

<input bind:value={person.name}>
<input bind:value={person.surname}>
```

`子对象`正在修改由`应用程序`拥有的`人`对象，而没有明确“允许”这样做。这强烈不建议，因为这可能会创建难以在大规模上推理的代码（“谁修改了这个值？”），因此会发出警告。

要修复它，要么创建回调属性来传递更改，要么将`person`标记为[`$bindable`]($bindable)。

### 
选择多个无效值

```
The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
```

当使用`<select multiple value={...}>`时，Svelte 会通过遍历传递给`value`的数组，将所有选中的`<option>`元素标记为选中。如果`value`不是一个数组，Svelte 将发出此警告并保持选中的选项不变。

为消除警告，请确保 `值`：

*   是一个用于显式选择的数组
*   是 `null` 或 `undefined` 以保持选择不变

### 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(...)` 创建传递给它的值的 [代理](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)。代理和值具有不同的身份，这意味着相等性检查总是会返回 `false`：

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

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

要解决这个问题，请确保您正在比较的是两个都通过`$state(...)`创建的值，或者两个都不是。请注意，`$state.raw(...)`将*不会*创建状态代理。

### svelte\_boundary\_reset\_noop

```
A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called
```

当渲染一个 [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary) 的内容时发生错误，将调用 `onerror` 处理器，并将错误以及一个尝试重新渲染内容的 `reset` 函数一起传递。

这个 `重置` 函数应该只调用一次。之后，它就没有效果了——在这种情况下，如果将 `重置` 的引用存储在边界之外，当 `<Contents />` 被渲染时点击按钮，将 *不会* 再次渲染内容。

```svelte
<script>
	let reset;
</script>

<button onclick={reset}>reset</button>

<svelte:boundary onerror={(e, r) => (reset = r)}>
	<!-- contents -->

	{#snippet failed(e)}
		<p>oops! {e.message}</p>
	{/snippet}
</svelte:boundary>
```

### 
过渡幻灯片显示

```
The `slide` transition does not work correctly for elements with `display: %value%`
```

幻灯片[切换](/docs/svelte/svelte-transition#slide)通过动画元素的高度`height`来实现，这需要一个`display`样式，如`block`、`flex`或`grid`。它不适用于：

*   `display: inline`（这是如`<span>`之类的元素的默认值），以及其变体如`inline-block`、`inline-flex`和`inline-grid`
*   `display: 表格` 和 `表格-[name]`，这是类似于 `<table>` 和 `<tr>` 元素的默认值
*   `显示: 内容`

## 
共享警告

### 
动态空元素内容

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

元素如`<input>`不能包含内容，传递给这些元素的任何子元素都将被忽略。

### 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%
```

`$state.snapshot` 尝试克隆给定的值以返回一个不再改变的引用。某些对象可能不可克隆，在这种情况下将返回原始值。在以下示例中，`属性`被克隆，但`窗口`没有被克隆，因为 DOM 元素不可克隆：

```js
const object = $state({ property: 'this is cloneable', window })
const snapshot = $state.snapshot(object);
```