From eb0f5273901ce5f4fa92999c4205edb95e1156c4 Mon Sep 17 00:00:00 2001
From: zhixzhan <49866537+zhixzhan@users.noreply.github.com>
Date: Thu, 5 Dec 2019 15:00:34 +0800
Subject: [PATCH] fix unsync bug, optimize error display

---
 .../fields/RecognizerField/InlineLuEditor.tsx | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/InlineLuEditor.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/InlineLuEditor.tsx
index f8f343ae48..07a55c8f0f 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/InlineLuEditor.tsx
+++ b/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/InlineLuEditor.tsx
@@ -13,21 +13,26 @@ interface InlineLuEditorProps {
 
 const InlineLuEditor: React.FC<InlineLuEditorProps> = props => {
   const { file, onSave, errorMsg } = props;
-  const [content, setContent] = useState(file.content || '');
+  const [localContent, setLocalContent] = useState('');
+  const [localErrorMsg, setLocalErrorMsg] = useState('');
 
-  // save on mount to trigger validation
   useEffect(() => {
-    if (content) {
-      onSave(content);
-    }
-  }, []);
+    setLocalContent(file.content || '');
+    const errorMsgText = file.diagnostics
+      .map(item => {
+        return item.text;
+      })
+      .join('\n');
+
+    setLocalErrorMsg(errorMsgText || errorMsg || '');
+  }, [file]);
 
   const commitChanges = value => {
-    setContent(value);
+    setLocalContent(value);
     onSave(value);
   };
 
-  return <LuEditor value={content} onChange={commitChanges} errorMsg={errorMsg} height={450} />;
+  return <LuEditor value={localContent} onChange={commitChanges} errorMsg={localErrorMsg} height={450} />;
 };
 
 export default InlineLuEditor;