diff --git a/web/src/pages/flow/form/code-form/index.tsx b/web/src/pages/flow/form/code-form/index.tsx index fda46dfc8..754ffa3f4 100644 --- a/web/src/pages/flow/form/code-form/index.tsx +++ b/web/src/pages/flow/form/code-form/index.tsx @@ -5,7 +5,8 @@ import { DynamicInputVariable } from './dynamic-input-variable'; import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent'; import { ICodeForm } from '@/interfaces/database/flow'; -import { useEffect } from 'react'; +import { useCallback } from 'react'; +import useGraphStore from '../../store'; import styles from './index.less'; loader.config({ paths: { vs: '/vs' } }); @@ -17,16 +18,20 @@ const options = [ const CodeForm = ({ onValuesChange, form, node }: IOperatorForm) => { const formData = node?.data.form as ICodeForm; + const updateNodeForm = useGraphStore((state) => state.updateNodeForm); - useEffect(() => { - setTimeout(() => { - // TODO: Direct operation zustand is more elegant - form?.setFieldValue( - 'script', - CodeTemplateStrMap[formData.lang as ProgrammingLanguage], - ); - }, 0); - }, [form, formData.lang]); + const handleChange = useCallback( + (value: ProgrammingLanguage) => { + if (node?.id) { + updateNodeForm( + node?.id, + CodeTemplateStrMap[value as ProgrammingLanguage], + ['script'], + ); + } + }, + [node?.id, updateNodeForm], + ); return (
{ label={