React 是一個用於構建用戶界面的 JavaScript 庫，它能夠讓開發者更輕鬆地創建高質量的用戶界面。然而，在使用 React 時，開發者可能會遇到一些常見的警告和錯誤提示，其中之一是“Error: A component is changing an uncontrolled input of type checkbox to be controlled。”這提示表明，React 正在嘗試控制一個未被控制的輸入，這可能導致許多潛在問題。
目錄
什麼是 React 中的未控制輸入？
在 React 中，未控制輸入是指未由 React 的狀態 (state) 進行管理的輸入元素，例如 HTML 表單元素，包括文本框、下拉列表、多選框或單選框。這些輸入的值可以由用戶自由更改，而 React 不會對其進行任何監控或控制，這可能導致應用狀態的不一致性。
為什麼會出現此錯誤？
當 React 嘗試將一個未控制的輸入轉變為受控的輸入時，會出現這個錯誤。這通常發生在開發者在初始渲染時沒有提供該輸入的受控值，或者在後續的更新中未能正確處理輸入的狀態。這可能會導致 React 對該輸入的狀態管理不當，從而產生錯誤。
如何解決 React 中的未控制輸入問題？
要解決 React 中的未控制輸入問題，最有效的方法是使用 React 的狀態來控制輸入的值。以下是一個示範，展示如何使用狀態來控制多選框的值：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
checkedValues: []
};
}
handleChange = (event) => {
const { checkedValues } = this.state;
if (event.target.checked) {
this.setState({ checkedValues: [...checkedValues, event.target.value] });
} else {
this.setState({ checkedValues: checkedValues.filter(value => value !== event.target.value) });
}
}
render() {
const { checkedValues } = this.state;
return (
<div>
<input
type="checkbox"
value="value1"
checked={checkedValues.includes('value1')}
onChange={this.handleChange}
/> Value 1
<input
type="checkbox"
value="value2"
checked={checkedValues.includes('value2')}
onChange={this.handleChange}
/> Value 2
</div>
);
}
}
通過使用 React 的狀態來控制輸入的值，開發者可以確保用戶輸入的值是正確的，並且可以有效避免出現上述錯誤提示。
錯誤排除建議
- 確保在初次渲染時為每個輸入提供正確的受控狀態。
- 在狀態更新時使用不可變數據結構，以避免直接修改狀態。
- 檢查所有輸入的 value 和 checked 屬性是否正確對應到狀態。
延伸應用
不僅限於多選框，這種模式同樣適用於其他表單元素，如文本框和下拉選單，使用 state 來管理所有輸入的值能夠提升應用的穩定性和可維護性。
Q&A（常見問題解答）
Q1: 如何知道我的輸入是受控還是未受控的？
A1: 如果你的輸入元素的值由 React 的 state 驅動，那它就是受控的；如果由 DOM 本身的狀態決定，那就是未受控的。
Q2: 受控和未受控輸入的最佳實踐是什麼？
A2: 一般來說，建議使用受控輸入，這樣可以使得應用的狀態和 UI 更加一致，並且方便進行表單驗證和數據處理。
Q3: 當我遇到此錯誤時，應該如何進行調試？
A3: 檢查所有與錯誤相關的輸入元素，確保它們初始渲染時的 value 和 checked 屬性正確綁定到狀態，並確保在每次狀態更新時，這些屬性也獲得正確的值。
—