From 60e2732f48f2aa4f2ab1845b40cff8fef10e1bc2 Mon Sep 17 00:00:00 2001
From: LASER-Yi <ly0007@yeah.net>
Date: Wed, 1 Sep 2021 11:30:28 +0800
Subject: [PATCH] Fix items are not updated when using mass editor

---
 frontend/src/components/header/Button.tsx | 10 +++-------
 frontend/src/components/inputs/Chips.tsx  | 10 ++++------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/header/Button.tsx b/frontend/src/components/header/Button.tsx
index 7036de021..fa0480689 100644
--- a/frontend/src/components/header/Button.tsx
+++ b/frontend/src/components/header/Button.tsx
@@ -6,7 +6,6 @@ import React, {
   MouseEvent,
   PropsWithChildren,
   useCallback,
-  useRef,
   useState,
 } from "react";
 import { Button } from "react-bootstrap";
@@ -59,16 +58,13 @@ export function ContentHeaderAsyncButton<T extends () => Promise<any>>(
 
   const [updating, setUpdate] = useState(false);
 
-  const promiseRef = useRef(promise);
-  const successRef = useRef(onSuccess);
-
   const click = useCallback(() => {
     setUpdate(true);
-    promiseRef.current().then((val) => {
+    promise().then((val) => {
       setUpdate(false);
-      successRef.current && successRef.current(val);
+      onSuccess && onSuccess(val);
     });
-  }, [successRef, promiseRef]);
+  }, [onSuccess, promise]);
 
   return (
     <ContentHeaderButton
diff --git a/frontend/src/components/inputs/Chips.tsx b/frontend/src/components/inputs/Chips.tsx
index 862d020c4..ce136731a 100644
--- a/frontend/src/components/inputs/Chips.tsx
+++ b/frontend/src/components/inputs/Chips.tsx
@@ -26,17 +26,15 @@ export const Chips: FunctionComponent<ChipsProps> = ({
 
   const input = useRef<HTMLInputElement>(null);
 
-  const changeRef = useRef(onChange);
-
   const addChip = useCallback(
     (value: string) => {
       setChips((cp) => {
         const newChips = [...cp, value];
-        changeRef.current && changeRef.current(newChips);
+        onChange && onChange(newChips);
         return newChips;
       });
     },
-    [changeRef]
+    [onChange]
   );
 
   const removeChip = useCallback(
@@ -46,14 +44,14 @@ export const Chips: FunctionComponent<ChipsProps> = ({
         if (index !== -1) {
           const newChips = [...cp];
           newChips.splice(index, 1);
-          changeRef.current && changeRef.current(newChips);
+          onChange && onChange(newChips);
           return newChips;
         } else {
           return cp;
         }
       });
     },
-    [changeRef]
+    [onChange]
   );
 
   const clearInput = useCallback(() => {