組件正在更改 ReactJS 中要控制的文本類型的非受控輸入錯誤

Question

警告：組件正在更改要控制的文本類型的不受控輸入。 輸入元素不應從不受控切換到受控（反之亦然）。 在組件的生命周期內決定使用受控或不受控的輸入元素。*

以下是我的代碼：

constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
  this.onSubmit = this.onSubmit.bind(this);
}

....

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 *"
      />
      <span style={{color: "red"}}>{this.state.errors["name"]}</span>
    </div>
  )
}

Answer 1

原因是，在您定義的狀態下：

this.state = { fields: {} }

fields 作為一個空白對象，因此在第一次渲染時this.state.fields.name將是undefined ，並且輸入字段將獲得其值：

value={undefined}

因此，輸入字段將變得不受控制。

在輸入中輸入任何值后，狀態fields將更改為：

this.state = { fields: {name: 'xyz'} }

那時輸入字段被轉換為受控組件； 這就是您收到錯誤的原因：

組件正在更改要控制的文本類型的不受控制的輸入。

可能的解決方案：

1- 將狀態中的fields定義為：

this.state = { fields: {name: ''} }

2- 或者使用像這樣的短路評估來定義 value 屬性：

value={this.state.fields.name || ''}   // (undefined || '') = ''

Answer 2

將value更改為defaultValue將解決它。

注意：

defaultValue僅用於初始加載。 如果要初始化input ，則應使用defaultValue ，但如果要使用state更改值，則需要使用value 。 閱讀本文了解更多信息。

我在input使用value={this.state.input ||""}來消除該警告。

Answer 3

在組件內部按以下方式放置輸入框。

<input className="class-name"
              type= "text"
              id="id-123"
              value={ this.state.value || "" }
              name="field-name"
              placeholder="Enter Name"
              />

Answer 4

除了已接受的答案，如果您使用checkbox或radio類型的input ，我發現我還需要 null/undefined 檢查checked屬性。

<input
  id={myId}
  name={myName}
  type="checkbox" // or "radio"
  value={myStateValue || ''}
  checked={someBoolean ? someBoolean : false}
  />

如果您使用 TS（或 Babel），您可以使用空合並而不是邏輯 OR 運算符：

value={myStateValue ?? ''}
checked={someBoolean ?? false}

Answer 5

很簡單，您必須先設置初始狀態

如果您不設置初始狀態， react 會將其視為不受控制的組件

Answer 6

發生這種情況是因為該值不能未定義或 null 來解決你可以這樣做

value={ this.state.value ?? "" }

Answer 7

首先設置當前狀態...this.state

這是因為當您要分配一個新狀態時，它可能是未定義的。 所以它將通過設置狀態提取當前狀態來修復

this.setState({...this.state, field})

如果你的狀態中有一個對象，你應該如下設置狀態，假設你必須在用戶對象中設置用戶名。

this.setState({user:{...this.state.user, ['username']: username}})

Answer 8

const [name, setName] = useState()

一旦您在文本字段中輸入就會產生錯誤

const [name, setName] = useState('') // <-- by putting in quotes 

將解決此字符串示例的問題。

Answer 9

我是 reactjs 的新手，我正在使用 reactjs 的第 17 版我遇到了這個問題

我解決了：

而不是這個

const [email, setEmail] = useState();

我添加了這個

const [email, setEmail] = useState("");

在 useState function 我添加了引號來初始化數據並且錯誤消失了。

Answer 10

如果您在字段中使用多個輸入，請遵循：例如：

class AddUser extends React.Component {
   constructor(props){
     super(props);

     this.state = {
       fields: { UserName: '', Password: '' }
     };
   }

   onChangeField = event => {
    let name = event.target.name;
    let value = event.target.value;
    this.setState(prevState => {
        prevState.fields[name] =  value;
        return {
           fields: prevState.fields
        };
    });
  };

  render() { 
     const { UserName, Password } = this.state.fields;
     return (
         <form>
             <div>
                 <label htmlFor="UserName">UserName</label>
                 <input type="text" 
                        id='UserName' 
                        name='UserName'
                        value={UserName}
                        onChange={this.onChangeField}/>
              </div>
              <div>
                  <label htmlFor="Password">Password</label>
                  <input type="password" 
                         id='Password' 
                         name='Password'
                         value={Password}
                         onChange={this.onChangeField}/>
              </div>
         </form>
     ); 
  }
}

在以下位置搜索您的問題：

onChangeField = event => {
    let name = event.target.name;
    let value = event.target.value;
    this.setState(prevState => {
        prevState.fields[name] =  value;
        return {
            fields: prevState.fields
        };
    });
};

Answer 11

使用React Hooks也不要忘記設置初始值。
我正在使用<input type='datetime-local' value={eventStart} />並且初始eventStart就像

const [eventStart, setEventStart] = useState();
相反
const [eventStart, setEventStart] = useState(''); .

括號中的空字符串是不同的。
此外，如果您像我一樣在提交后重置表單，您需要再次將其設置為空字符串，而不僅僅是空括號。

這只是我對這個話題的小貢獻，也許它會幫助某人。

Answer 12

如果值不存在或為空，則輸入空值。

value={ this.state.value || "" }

Answer 13

就我而言，這幾乎就是 Mayank Shukla 的最佳答案所說的。 唯一的細節是我的狀態完全缺乏我定義的屬性。

例如，如果您有以下狀態：

state = {
    "a" : "A",
    "b" : "B",
}

如果您正在擴展您的代碼，您可能想要添加一個新道具，因此，您可能會在代碼的其他地方創建一個新屬性c其值不僅在組件狀態上未定義，而且屬性本身也未定義。

要解決這個問題，只需確保將c添加到您的狀態中並為其提供適當的初始值。

例如，

state = {
    "a" : "A",
    "b" : "B",
    "c" : "C", // added and initialized property!
}

希望我能夠解釋我的邊緣情況。

Answer 14

當輸入字段值未定義時，此問題的原因然后從反應中拋出警告。 如果您為多個輸入字段創建一個 changeHandler 並且您想使用 changeHandler 更改狀態，那么您需要使用 by spread operator 分配先前的值。 就像我這里的代碼一樣。

constructor(props){
    super(props)
    this.state = {
        user:{
            email:'',
            password:''
        }
    }
}

// This handler work for every input field
changeHandler = event=>{
    // Dynamically Update State when change input value
    this.setState({
        user:{
            ...this.state.user,
            [event.target.name]:event.target.value
        }
    })
}

submitHandler = event=>{
    event.preventDefault()

    // Your Code Here...
}

render(){
    return (
        <div className="mt-5">
       
            <form onSubmit={this.submitHandler}>
                <input type="text" value={this.state.user.email} name="email" onChage={this.changeHandler} />
                
                <input type="password" value={this.state.user.password} name="password" onChage={this.changeHandler} />

                <button type="submit">Login</button>
            </form>
      

        </div>
    )
}

Answer 15

如上所述，您需要設置初始狀態，就我而言，我忘記在 setSate(); 中添加 ' ' 引號；

  const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState()
  const [enteredAge, setEnteredAge] = useState()

給出以下錯誤

正確的代碼是簡單地將初始狀態設置為空字符串 ' '

  const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState('')
  const [enteredAge, setEnteredAge] = useState('')

Answer 16

雖然這聽起來很瘋狂，但為我解決這個問題的方法是添加一個額外的 div。 部分代碼為例：

  ... [Other code] ...
  const [brokerLink, setBrokerLink] = useState('');
  ... [Other code] ...

  return (
    ... [Other code] ...
              <div styleName="advanced-form" style={{ margin: '0 auto', }}>
                {/* NOTE: This div */}
                <div>
                  <div styleName="form-field">
                    <div>Broker Link</div>
                    <input
                      type="text"
                      name="brokerLink"
                      value={brokerLink}
                      placeholder=""
                      onChange={e => setBrokerLink(e.target.value)}
                    />
                  </div>
                </div>
              </div>
    ... [Other code] ...
  );
... [Other code] ...

很奇怪。 如果沒有這個額外的 div，看起來 react 最初渲染的 input 元素沒有 value 屬性，但由於某種原因有一個空的 style 屬性。 您可以通過查看 html 看到這一點。 這導致控制台警告..

更奇怪的是，添加一個不是空字符串的默認值或執行類似value={brokerLink || ''}的操作。 value={brokerLink || ''}會導致完全相同的問題..

另一個奇怪的事情是我有 30 個其他元素幾乎完全相同，但沒有導致這個問題。 唯一的區別是這個brokerLink沒有那個外部div..並且將它移動到代碼的其他部分而不更改任何內容由於某種原因刪除了警告..

如果沒有我的確切代碼，可能幾乎不可能復制。 如果這不是反應中的錯誤或其他什么，我不知道是什么。

Answer 17

但是我正在使用功能組件並在階段使用鈎子，如使用狀態，我將如何管理this.state.value

Answer 18

警告：組件正在更改要控制的文本類型的不受控制的輸入。 輸入元素不應從不受控制切換到受控制（反之亦然）。 決定在組件的生命周期內使用受控或非受控輸入元素。

解決方案：檢查值是否未定義

React / Formik / Bootstrap / TypeScript

例子 ：

{ values?.purchaseObligation.remainingYear ?
  <Input
   tag={Field}
   name="purchaseObligation.remainingYear"
   type="text"
   component="input"
  /> : null
}

Answer 19

可以應用多種方法：

• 基於類的方法：使用本地狀態並使用默認值定義現有字段：

constructor(props) {
    super(props);
    this.state = {
      value:''
    }
  }
<input type='text'
                  name='firstName'
                  value={this.state.value}
                  className="col-12"
                  onChange={this.onChange}
                  placeholder='Enter First name' />

• 在函數式樣式組件中使用 Hooks React > 16.8：

[value, setValue] = useState('');
<input type='text'
                  name='firstName'
                  value={value}
                  className="col-12"
                  onChange={this.onChange}
                  placeholder='Enter First name' />

• 如果使用 propTypes 並在功能樣式的 HOC 組件的情況下為 propTypes 提供默認值。

 HOC.propTypes = {
    value       : PropTypes.string
  }
  HOC.efaultProps = {
    value: ''
  }

function HOC (){

  return (<input type='text'
                  name='firstName'
                  value={this.props.value}
                  className="col-12"
                  onChange={this.onChange}
                  placeholder='Enter First name' />)

}

Answer 20

改變這個

  const [values, setValues] = useState({intialStateValues});

為此

  const [values, setValues] = useState(intialStateValues);

Answer 21

像這樣

value={this.state.fields && this.state.fields["name"] || ''}

為我工作。

但我這樣設置初始狀態：

this.state = {
  fields: [],
}

Answer 22

我使用 react hooks 遇到了同樣的警告，雖然我之前已經將初始狀態初始化為：-

const [post,setPost] = useState({title:"",body:""})

但后來我在 onChange 事件處理程序上覆蓋了預定義狀態對象的一部分，

 const onChange=(e)=>{
        setPost({[e.target.name]:e.target.value})
    }

解決方案我通過首先處理前一個狀態的整個對象（通過使用擴展運算符）然后在它上面進行編輯來解決這個問題，

 const onChange=(e)=>{
        setPost({...post,[e.target.name]:e.target.value})
    }

Answer 23

解決此問題的最佳方法是將初始狀態設置為null 。

constructor(props) {
 super(props)
  this.state = {
    field: null
  }
}

然后你仍然可以像if (field)一樣運行你的檢查，如果你的值為'' ，仍然可以獲得相同的結果。

現在，由於您的值在評估后現在被歸類為類型對象而不是字符串或未定義。 因此，從控制台的一個大紅色塊😁😎清除錯誤。

Answer 24

如果您將value屬性設置為對象的屬性並希望確保該屬性不是未定義的，那么您可以結合 nullish 合並運算符?? 帶有可選的鏈接運算符?. 如下：

<input
  value={myObject?.property ?? ''}
/>

Answer 25

我也面臨同樣的問題。 我的解決方案是我錯過了向元素添加“名稱”屬性。

<div className="col-12">
   <label htmlFor="username" className="form-label">Username</label>
        <div className="input-group has-validation">
             <span className="input-group-text">@</span>
                  <input 
                      type="text" 
                      className="form-control" 
                      id="username"
                      placeholder="Username" 
                      required=""
                      value={values.username}
                      onChange={handleChange}
                  />
                  <div className="invalid-feedback">
                      Your username is required.
                  </div>
        </div>
</div>

在我在屬性的輸入列表中引入 name = username 之后，它工作正常。

Answer 26

對於功能組件：

const SignIn = () => {

  const [formData, setFormData] = useState({
    email: "",
    password: ""
  });

  
  const handleChange = (event) => {
    const { value, name } = event.target;
    setFormData({...formData, [name]: value });
  };


  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Signed in");
    setFormData({
      email: "",
      password: ""
    });
  };


  return (
    <div className="sign-in-container">
      <form onSubmit={handleSubmit}>
        <FormInput
          name="email"
          type="email"
          value={formData.email}
          handleChange={handleChange}
          label="email"
          required
        />
        <FormInput
          name="password"
          type="password"
          value={formData.password}
          handleChange={handleChange}
          label="password"
          required
        />
        <CustomButton type="submit">Sign in</CustomButton>
      </form>
    </div>
  );
};

export default SignIn;

Answer 27

對我來說，這是錯誤的：

<input onChange={onClickUpdateAnswer} value={answer.text}>
  {answer.text}
</input>

如您所見，我已將字符串傳遞到Input標簽的正文中，

使固定：

<input onChange={onClickUpdateAnswer} value={answer.text}></input>

Answer 28

就我而言（愚蠢的錯誤）。 我有語法錯誤的初始狀態。

語法錯誤

我在初始狀態參數上添加大括號時出錯，不要讓它永遠。

正確的方法