doc: (ImageViewer) add FAQ

src/components/image-viewer/index.en.md

@@ -49,3 +49,29 @@ The return value of the `show` method is a component controller, which contains
 | close | Function to close the ImageViewer | `() => void` |
 
 If you want to close all ImageViewers created by the `show` method. You can call `ImageViewer.clear()`.
+
+## FAQ
+
+### Why I updated the value of `defaultIndex`, but the image displayed by ImageViewer.Multi did not switch?
+
+ImageViewer.Multi is an [uncontrolled](https://reactjs.org/docs/glossary.html#controlled-vs-uncontrolled-components) component, `defaultIndex` is only read once when the component is loaded, After this, if you change the value of `defaultIndex`, it will not have any effect on the component. Therefore, the following writing method does not have the effect of switching pictures:
+
+```jsx
+<Button
+  onClick={() => {
+    setIndex(i => i + 1)
+  }}
+>
+  Next
+</Button>
+<ImageViewer.Multi
+  images={images}
+  defaultIndex={index}
+  visible={visible}
+  onClose={() => {
+    setVisible(false);
+  }}
+/>
+```
+
+You can use ref for manual manipulation of ImageViewer.Multi, or consider using `ImageViewer.show()`.

src/components/image-viewer/index.zh.md

@@ -49,3 +49,26 @@ const handlerMulti = ImageViewer.Multi.show(props)
 | close | 关闭图片查看器 | `() => void` |
 
 如果你想关闭全部通过指令式创建出来的 ImageViewer，可以调用 `ImageViewer.clear()`。
+
+## FAQ
+
+### 为什么我更新了 `defaultIndex` 的值，但是 ImageViewer.Multi 显示的图片并没有切换？
+
+ImageViewer.Multi 是一个[非受控](https://reactjs.org/docs/glossary.html#controlled-vs-uncontrolled-components)的组件，`defaultIndex` 只会在组件加载的时候读取一次，在此之后，如果你修改了 `defaultIndex` 的值，并不会对组件有任何的影响。因此，下面这种写法并不能起到切换图片的效果：
+
+```jsx
+<Button
+  onClick={() => {
+    setIndex(i => i + 1)
+  }}
+>
+  Next
+</Button>
+
+<ImageViewer.Multi
+  images={images}
+  defaultIndex={index}
+/>
+```
+
+你可以使用 ref 来对 ImageViewer.Multi 进行手动的操作，也可以考虑使用 `ImageViewer.show()`。