如何避免ReactJS中的「不受控輸入到受控輸入轉換錯誤」？

ReactJS 中不受控輸入到受控輸入轉換錯誤

React 警告不要在不受控和受控輸入元素之間切換。當輸入欄位最初自由地接受使用者輸入（不受控制），然後開發人員稍後嘗試透過狀態控制其值（受控制）時，通常會發生此錯誤。

代碼片段：

錯誤由以下代碼說明：

<code class="javascript">constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
}

onChange(field, e){
  let fields = this.state.fields;
  fields[field] = e.target.value;
  this.setState({fields});
}

render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields["name"]}
        onChange={this.onChange.bind(this, "name")}
        className="form-control"
        type="text"
        refs="name"
        placeholder="Name *"
      />
    </div>
  )
}</code>

根本原因：

在此程式碼中，問題在於欄位為的初始狀態初始化為空物件。當元件首次呈現時， this.state.fields.name 未定義，使輸入成為不受控制的元件。但是，當使用者輸入值時，欄位會更新，從而使輸入受到控制。

可能的解決方案：

要解決此錯誤，有兩個選項：

1. 使用預設值初始化欄位：

   使用預設值定義初始狀態的欄位：

   <code class="javascript">this.state = {
     fields: {name: ''}
   }</code>

2. 使用短路求值：

   在value 屬性中使用短路求值，當this.state.fields.name 未定義時提供預設值：

   <code class="javascript"><input value={this.state.fields.name || ''} /></code>

以上是如何避免ReactJS中的「不受控輸入到受控輸入轉換錯誤」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！