From 3b724e6f850de8fa0a1eb3167c97410f47163900 Mon Sep 17 00:00:00 2001
From: awmleer <awmleer@icloud.com>
Date: Thu, 24 Mar 2022 16:09:22 +0800
Subject: [PATCH] doc: (ImageViewer) add FAQ

---
 src/components/image-viewer/index.en.md | 26 +++++++++++++++++++++++++
 src/components/image-viewer/index.zh.md | 23 ++++++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/src/components/image-viewer/index.en.md b/src/components/image-viewer/index.en.md
index ceff9ee1a8..7e5aff5406 100644
--- a/src/components/image-viewer/index.en.md
+++ b/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()`.
diff --git a/src/components/image-viewer/index.zh.md b/src/components/image-viewer/index.zh.md
index c03c34e6fc..240bb8e504 100644
--- a/src/components/image-viewer/index.zh.md
+++ b/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()`。