http node data sync

web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts

@@ -15,30 +15,48 @@ const strToKeyValueList = (value: string) => {
   })
 }
 
+const normalizeList = (items: KeyValue[]) => {
+  return items.map(item => ({
+    ...item,
+    id: item.id || uniqueId(UNIQUE_ID_PREFIX),
+  }))
+}
+
+const stringifyList = (items: KeyValue[], noFilter?: boolean) => {
+  const source = noFilter ? items : items.filter(item => item.key && item.value)
+  return source.map(item => `${item.key}:${item.value}`).join('\n')
+}
+
 const useKeyValueList = (value: string, onChange: (value: string) => void, noFilter?: boolean) => {
-  const [list, doSetList] = useState<KeyValue[]>(value ? strToKeyValueList(value) : [])
-  const setList = (l: KeyValue[]) => {
-    doSetList(l.map((item) => {
-      return {
-        ...item,
-        id: item.id || uniqueId(UNIQUE_ID_PREFIX),
-      }
-    }))
-  }
-  useEffect(() => {
+  const [list, doSetList] = useState<KeyValue[]>(value ? normalizeList(strToKeyValueList(value)) : [])
+  const setList = useCallback((nextList: KeyValue[]) => {
+    const normalized = normalizeList(nextList)
+    doSetList(normalized)
+
     if (noFilter)
       return
-    const newValue = list.filter(item => item.key && item.value).map(item => `${item.key}:${item.value}`).join('\n')
+
+    const newValue = stringifyList(normalized, noFilter)
     if (newValue !== value)
       onChange(newValue)
-  }, [list, noFilter])
+  }, [noFilter, onChange, value])
+  useEffect(() => {
+    doSetList((prev) => {
+      const targetItems = value ? strToKeyValueList(value) : []
+      const currentValue = stringifyList(prev, noFilter)
+      const targetValue = stringifyList(targetItems, noFilter)
+      if (currentValue === targetValue)
+        return prev
+      return normalizeList(targetItems)
+    })
+  }, [value, noFilter])
   const addItem = useCallback(() => {
     setList([...list, {
       id: uniqueId(UNIQUE_ID_PREFIX),
       key: '',
       value: '',
     }])
-  }, [list])
+  }, [list, setList])
 
   const [isKeyValueEdit, {
     toggle: toggleIsKeyValueEdit,