fix the warning in console when create a new component

packages/editor/src/components/CodeEditor/StateViewer.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Box, Input } from '@chakra-ui/react';
 import { css } from '@emotion/css';
 import { JSONTree } from 'react-json-tree';
 import { pickBy } from 'lodash-es';
+import { watch } from '@sunmao-ui/runtime';
 import ErrorBoundary from '../ErrorBoundary';
 
 const theme = {
@@ -35,11 +36,21 @@ const style = css`
 
 export const StateViewer: React.FC<{ store: Record<string, unknown> }> = ({ store }) => {
   const [filterText, setFilterText] = useState('');
+  const [refreshFlag, setRefreshFlag] = useState(false);
   const data = useMemo(() => {
     return pickBy(store, (_v, key) => {
       return filterText ? key.includes(filterText) : true;
     });
-  }, [store, filterText]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [store, filterText, refreshFlag]);
+
+  useEffect(() => {
+    const stop = watch(store, () => {
+      setRefreshFlag(v => !v);
+    });
+
+    return stop;
+  }, [store]);
 
   return (
     <ErrorBoundary>

packages/editor/src/components/Editor.tsx

@@ -4,7 +4,6 @@ import {
   GridCallbacks,
   DIALOG_CONTAINER_ID,
   initSunmaoUI,
-  watch,
   SunmaoLib,
 } from '@sunmao-ui/runtime';
 import { Box, Tabs, TabList, Tab, TabPanels, TabPanel, Flex } from '@chakra-ui/react';
@@ -68,7 +67,6 @@ export const Editor: React.FC<Props> = observer(
     const [code, setCode] = useState('');
     const [recoverKey, setRecoverKey] = useState(0);
     const [isError, setIsError] = useState<boolean>(false);
-    const [store, setStore] = useState(stateStore);
 
     const onError = (err: Error | null) => {
       setIsError(err !== null);
@@ -138,13 +136,6 @@ export const Editor: React.FC<Props> = observer(
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [app, isError]); // it only should depend on the app schema and `isError` to update
-    useEffect(() => {
-      const stop = watch(stateStore, newValue => {
-        setStore({ ...newValue });
-      });
-
-      return stop;
-    }, [stateStore]);
 
     const renderMain = () => {
       const appBox = (
@@ -227,7 +218,7 @@ export const Editor: React.FC<Props> = observer(
                   <DataSource active={activeDataSource?.id ?? ''} services={services} />
                 </TabPanel>
                 <TabPanel p={0} height="100%">
-                  <StateViewer store={store} />
+                  <StateViewer store={stateStore} />
                 </TabPanel>
               </TabPanels>
             </Tabs>
@@ -277,7 +268,7 @@ export const Editor: React.FC<Props> = observer(
                 key={activeDataSource.id}
                 api={activeDataSource}
                 services={services}
-                store={store}
+                store={stateStore}
                 className={ApiFormStyle}
               />
             ) : null}