解決 React 中的「Error: A component is changing an uncontrolled input of type radio to be controlled.」錯誤

React 是一個非常受歡迎的 JavaScript 框架，它可以讓開發者快速開發出高品質的網頁應用程式。然而，開發者有時會遇到一些問題，其中一個常見的問題就是「Error: A component is changing an uncontrolled input of type radio to be controlled.」。這個錯誤發生的原因是因為 React 的組件正在改變一個未受控制的輸入，而該輸入的類型是 radio。這樣的錯誤可能會導致程式無法正常運行，因此必須及時解決。

理解未控制與受控制的輸入

在 React 中，受控制的輸入意味著組件的狀態（state）控制輸入的值，而不是由使用者直接控制。未控制的輸入則是指不受組件狀態控制，這可能導致值的不一致性及錯誤。為了解決這個問題，我們需要確保 radio 輸入是受控制的。

如何實現受控制的 radio 輸入

為了實現受控制的輸入，我們可以使用 React 的 state 來儲存和更新輸入的值。以下是 2025 年更新後的最優實踐代碼：

import React, { Component } from 'react';

class RadioControlledInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'option1' // 初始選項
    };
  }

  handleChange = (event) => {
    this.setState({
      value: event.target.value // 更新狀態
    });
  }

  render() {
    return (
      

         Option 1
         Option 2
      
    );
  }
}

export default RadioControlledInput;

在上面的程式碼中，我們利用 state 來控制 radio 的值，並使用 handleChange 方法來更新 state 中的值。這樣可以確保所有的 radio 輸入都是受控的，從而避免出現錯誤。

錯誤排除與常見問題

如果您仍然遇到此錯誤，請檢查以下幾點：

• 確保所有 radio 輸入的 checked 屬性都依賴於 state 的值。
• 確認 handleChange 方法正確設置了新值。
• 檢查是否有其他地方影響了輸入的狀態。

延伸應用

受控制的輸入不僅限於 radio，還可以應用於其他類型的輸入，如 checkbox 和 text input。這種模式使得表單的狀態管理變得更加一致，並有助於實現更複雜的用戶界面。

Q&A（常見問題解答）

1. 什麼是受控制和未控制的輸入？

受控制的輸入是由 React 組件的 state 管理的，而未控制的輸入則是由 DOM 直接管理的。

2. 如何檢查我的輸入是否受控制？

檢查輸入的 checked 或 value 屬性是否依賴於組件的 state。如果是，則該輸入為受控制。

3. 如果我遇到錯誤，如何進行排除？

確認所有輸入的狀態都與組件的 state 相關聯，並確保 handleChange 方法正確更新這些狀態。

—