fix: bugs

src/components/DataTypes/Array.tsx

@@ -81,7 +81,6 @@ export const ArrayType: React.FC<DataItemProps<unknown[]>> = (props) => {
       }
       return array
     }, [])
-    console.log('value', value)
 
     return value.map((list, index) => {
       const path = [...props.path]

src/index.tsx

@@ -9,7 +9,7 @@ import { useCallback, useEffect, useMemo } from 'react'
 import { DataKeyPair } from './components/DataKeyPair'
 import {
   createJsonViewerStore,
-  JsonViewerProvider, useJsonViewerStore,
+  JsonViewerProvider, JsonViewerState, useJsonViewerStore,
   useJsonViewerStoreApi
 } from './stores/JsonViewerStore'
 import type { JsonViewerProps } from './type'
@@ -21,15 +21,22 @@ export type JsonViewerOnChange = <U = unknown>(path: (string | number)[], oldVal
 
 const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
   const api = useJsonViewerStoreApi()
+  const setIfNotUndefined = useCallback(function setIfNotUndefined <Key extends keyof JsonViewerState> (key: Key, value: JsonViewerState[Key] | undefined) {
+    if (value !== undefined) {
+      api.setState({
+        [key]: value
+      })
+    }
+  }, [api])
   useEffect(() => {
-    api.setState(() => ({
-      value: props.value,
-      indentWidth: props.indentWidth,
-      defaultCollapsed: props.defaultCollapsed,
-      onChange: props.onChange,
-      groupArraysAfterLength: props.groupArraysAfterLength
-    }))
-  }, [api, props.defaultCollapsed, props.groupArraysAfterLength, props.indentWidth, props.onChange, props.value])
+    setIfNotUndefined('value', props.value)
+  }, [props.value, setIfNotUndefined])
+  useEffect(() => {
+    // setIfNotUndefined('indentWidth', props.indentWidth)
+    setIfNotUndefined('defaultCollapsed', props.defaultCollapsed)
+    setIfNotUndefined('onChange', props.onChange)
+    setIfNotUndefined('groupArraysAfterLength', props.groupArraysAfterLength)
+  }, [api, props.defaultCollapsed, props.groupArraysAfterLength, props.onChange, props.value, setIfNotUndefined])
 
   const value = useJsonViewerStore(store => store.value)
   const setHover = useJsonViewerStore(store => store.setHover)

src/stores/JsonViewerStore.ts

@@ -76,7 +76,6 @@ export type JsonViewerActions = {
   setHover: (path: (string | number)[] | null) => void
 }
 
-// todo
 export const createJsonViewerStore = () =>
   create(
     combine<JsonViewerState, JsonViewerActions>(

src/utils/index.ts

@@ -1,8 +1,8 @@
-export const applyValue = (obj: any, path: string[], value: any) => {
+export const applyValue = (obj: any, path: (string | number)[], value: any) => {
   if (typeof obj !== 'object' || obj === null) {
     return value
   }
-  const arr: string[] = [...path]
+  const arr: (string | number)[] = [...path]
   let key
   if (path.length > 0) {
     key = arr[0]