一.問題描述：

上週使用React在做一個後臺管理的前端UI介面，應該沒什麼問題，結果，在聯調時，發現在對同一個元件引用多次後，表單控制元件會“串聯“。。。直接上圖還是比較好呢。。。

其中A,B,C都是單選按鈕，是同一個元件，在不同地方的多次複用 ！但是在，不同調用時候，會相互影響。

二.問題分析：

（1）由於新建和修改的結構以及要傳回介面的資料是一模一樣的，所以就選擇在搭結構的時候複用元件。因為是複用元件，所以在遇到這個bug時，一直以為是由於元件的複用，state裡的狀態發生被共享了，然後查了很多資料找了很多例子來試，都沒能解決這個問題。。。然後就鬱悶了。。

（2）在查資料的過程中看到了一個不錯的除錯React的工具，果斷安裝。（工具名字是：React Developer Tools

“新建“－元件狀態：

”修改“－元件狀態：（列表裡不只一個數據，為了更好的看出元件state變化，多貼兩個元件狀態）

因此可以看到，元件的複用不會共享狀態，所以。。。之前的思路完全搞錯啦！

（3）後來拋棄state會共享這一錯誤想法後，仔細檢視審查程式碼後發現，

input 是radio/checkbox的表單，不管單選還是多選，都有一個name，

在複用元件時，state是根據元件的，在元件生命週期內有效的，即使名字相同，state也不會共享。

但是type=radio/checkbox的input，name是相對頁面的，因為它是html程式碼，沒有生命週期的，名字相同，就會認為是同一組的單選/多選的按鈕，因此，要在複用元件時，要給name新增相應的編號，以區分不同。

三.解決問題：

複用元件時，注意表單的name的值。