admin/flowgram.ai
1
0
Fork 0
mirror of https://gitee.com/ByteDance/flowgram.ai.git synced 2025-07-07 17:43:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(variables): fix error (#467)

Browse Source
This commit is contained in:
Yiwei Mao 2025-07-04 16:51:07 +08:00 committed by GitHub
parent 2c4a42a772
commit e5c96344f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/docs/src/en/guide/advanced/variable/variable-consume.mdx
View File

@ -181,8 +181,8 @@ function UserNameDisplay() {
// Start tracking! // Start tracking!
const disposable = available.trackByKeyPath(keyPath, (nameField) => { const disposable = available.trackByKeyPath(keyPath, (nameField) => {
// This callback function will be triggered when user.name changes // This callback function will be triggered when user.name changes
// nameField is the changed variable field, from which we can get the latest value // nameField is the changed variable field, from which we can get the latest default value
setUserName(nameField?.value || ''); setUserName(nameField?.meta.default || '');
}); });
// When the component unmounts, don't forget to cancel the tracking to avoid memory leaks // When the component unmounts, don't forget to cancel the tracking to avoid memory leaks
@ -202,7 +202,7 @@ Let's use a table to compare these three core listening APIs in detail:
| API | Trigger | Callback Parameters | Core Differences and Applicable Scenarios | | API | Trigger | Callback Parameters | Core Differences and Applicable Scenarios |
| :--- | :--- | :--- | :--- | | :--- | :--- | :--- | :--- |
| `onVariableListChange` | When the **list structure** of available variables changes. | `(variables: VariableDeclaration[]) => void` | **Only cares about the list itself**. For example, an upstream node adds/deletes an output variable, causing the total number or members of available variables to change. It does not care about internal or drilled-down changes to variables. Suitable for scenarios where the UI needs to be updated based on the presence or number of variables in the list. | | `onVariableListChange` | When the **list structure** of available variables changes. | `(variables: VariableDeclaration[]) => void` | **Only cares about the list itself**. For example, an upstream node adds/deletes an output variable, causing the total number or members of available variables to change. It does not care about internal or drilled-down changes to variables. Suitable for scenarios where the UI needs to be updated based on the presence or number of variables in the list. |
| `onAnyVariableChange` | When the **internal value** of **any** variable in the list changes. | `(changedVariable: VariableDeclaration) => void` | **Only cares about content updates to variables**. For example, a user modifies the type of an output variable. It does not care about changes to the list structure. Suitable for scenarios where you need to react to changes in the content of any variable. | | `onAnyVariableChange` | When the **content (meta, type, drilldown fields)** of **any** variable in the list changes. | `(changedVariable: VariableDeclaration) => void` | **Only cares about content (type, meta, drilldown) updates to variables**. For example, a user modifies the type of an output variable. It does not care about changes to the list structure. Suitable for scenarios where you need to react to changes in the content of any variable. |
| `onListOrAnyVarChange` | When **either** of the above two situations occurs. | `(variables: VariableDeclaration[]) => void` | **The most comprehensive listener**, a combination of the previous two. It is triggered by either a change in the list structure or a change in the value of any variable. Suitable for "catch-all" scenarios where you need to respond to any possible changes. | | `onListOrAnyVarChange` | When **either** of the above two situations occurs. | `(variables: VariableDeclaration[]) => void` | **The most comprehensive listener**, a combination of the previous two. It is triggered by either a change in the list structure or a change in the value of any variable. Suitable for "catch-all" scenarios where you need to respond to any possible changes. |
#### Code Example #### Code Example
@ -224,12 +224,12 @@ function AdvancedListenerComponent() {
// 2. Listen for changes in the value of any variable // 2. Listen for changes in the value of any variable
const valueChangeDisposable = available.onAnyVariableChange((changedVariable) => { const valueChangeDisposable = available.onAnyVariableChange((changedVariable) => {
console.log(`The value of variable '${changedVariable.name}' has changed! The new value is:`, changedVariable.value); console.log(`The content of variable '${changedVariable.keyPath.join('.')}' has changed!`);
}); });
// 3. Listen for all changes (structure or value) // 3. Listen for all changes (structure or content)
const allChangesDisposable = available.onListOrAnyVarChange((variables) => { const allChangesDisposable = available.onListOrAnyVarChange((variables) => {
console.log('The variable list or the value of one of its variables has changed!'); console.log('The variable list or the content of one of its variables has changed!');
// Note: The callback parameter here is the complete variable list, not the single changed variable // Note: The callback parameter here is the complete variable list, not the single changed variable
}); });
@ -248,4 +248,4 @@ function AdvancedListenerComponent() {
**Key Points**: **Key Points**:
* These APIs all return a `Disposable` object. * These APIs all return a `Disposable` object.
* To avoid memory leaks and unnecessary calculations, you must call its `dispose()` method in the cleanup function of `useEffect` to cancel the listener. * To avoid memory leaks and unnecessary calculations, you must call its `dispose()` method in the cleanup function of `useEffect` to cancel the listener.

18
apps/docs/src/zh/guide/advanced/variable/variable-consume.mdx
View File

@ -180,9 +180,9 @@ function UserNameDisplay() {
// 开始追踪！ // 开始追踪！
const disposable = available.trackByKeyPath(keyPath, (nameField) => { const disposable = available.trackByKeyPath(keyPath, (nameField) => {
// 当 user.name 变化时，这个回调函数会被触发 // 当 user.name 变量字段变化时，这个回调函数会被触发
// nameField 就是那个变化的变量字段，我们可以从中获取最新的值 // nameField 就是那个变化的变量字段，我们可以从中获取最新的默认值
setUserName(nameField?.value || ''); setUserName(nameField?.meta.default || '');
}); });
// 组件卸载时，别忘了取消追踪，避免内存泄漏 // 组件卸载时，别忘了取消追踪，避免内存泄漏
@ -202,8 +202,8 @@ function UserNameDisplay() {
| API | 触发时机 | 回调参数 | 核心区别与适用场景 | | API | 触发时机 | 回调参数 | 核心区别与适用场景 |
| :--- | :--- | :--- | :--- | | :--- | :--- | :--- | :--- |
| `onVariableListChange` | 当可用变量的**列表结构**发生变化时。 | `(variables: VariableDeclaration[]) => void` | **只关心列表本身**。比如，上游节点新增/删除了一个输出变量，导致可用变量的总数或成员发生了变化。它不关心变量内部和下钻的改变。适用于需要根据变量列表的有无或数量来更新 UI 的场景。 | | `onVariableListChange` | 当可用变量的**列表结构**发生变化时。 | `(variables: VariableDeclaration[]) => void` | **只关心列表本身**。比如，上游节点新增/删除了一个输出变量，导致可用变量的总数或成员发生了变化。它不关心变量内部和下钻的改变。适用于需要根据变量列表的有无或数量来更新 UI 的场景。 |
| `onAnyVariableChange` | 当列表中**任意一个**变量的**内部值**发生变化时。 | `(changedVariable: VariableDeclaration) => void` | **只关心变量内容的更新**。比如，用户修改了一个输出变量的类型。它不关心列表结构的变化。适用于需要对任何一个变量的内容变化做出反应的场景。 | | `onAnyVariableChange` | 当列表中**任意一个**变量的**类型，元数据和下钻字段**发生变化时。 | `(changedVariable: VariableDeclaration) => void` | **只关心变量内容的更新**。比如，用户修改了一个输出变量的类型。它不关心列表结构的变化。适用于需要对任何一个变量的内容变化做出反应的场景。 |
| `onListOrAnyVarChange` | 以上两种情况**任意一种**发生时。 | `(variables: VariableDeclaration[]) => void` | **最全面的监听**，是前两者的结合。无论是列表结构变化，还是任何一个变量的值变化，都会触发。适用于需要对任何可能的变化都进行响应的“兜底”场景。 | | `onListOrAnyVarChange` | 以上两种情况**任意一种**发生时。 | `(variables: VariableDeclaration[]) => void` | **最全面的监听**，是前两者的结合。无论是列表结构变化，还是任何一个变量的变化，都会触发。适用于需要对任何可能的变化都进行响应的“兜底”场景。 |
#### 代码示例 #### 代码示例
@ -222,14 +222,14 @@ function AdvancedListenerComponent() {
console.log('可用变量列表的结构变了！新的列表长度是:', variables.length); console.log('可用变量列表的结构变了！新的列表长度是:', variables.length);
}); });
// 2. 监听任意变量的值变化 // 2. 监听任意变量的变化
const valueChangeDisposable = available.onAnyVariableChange((changedVariable) => { const valueChangeDisposable = available.onAnyVariableChange((changedVariable) => {
console.log(`变量 '${changedVariable.name}' 的值变了！新值是:`, changedVariable.value); console.log(`变量 '${changedVariable.keyPath.join('.')}' 的类型、下钻或者 meta 变了`);
}); });
// 3. 监听所有变化（结构或值） // 3. 监听所有变化（结构或单个变量内部）
const allChangesDisposable = available.onListOrAnyVarChange((variables) => { const allChangesDisposable = available.onListOrAnyVarChange((variables) => {
console.log('变量列表或其中某个变量的值发生了变化！'); console.log('变量列表或其中某个变量发生了变化！');
// 注意：这里的回调参数是完整的变量列表，而不是单个变化的变量 // 注意：这里的回调参数是完整的变量列表，而不是单个变化的变量
}); });