Bir bileşen ReactJS'de denetlenecek hata metni tipinde kontrolsüz bir girişi değiştiriyor

Uyarı: Bir bileşen, kontrol edilecek tip metinlerin kontrolsüz bir girişini değiştiriyor. Giriş elemanları kontrolsüzden kontrollü (veya tam tersi) olmamalıdır. Bileşenin ömrü boyunca kontrollü veya kontrolsüz giriş öğesi kullanma arasında karar verin. *

Kodum aşağıdadır:

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>
  )
}

Sebebi, tanımladığınız durumda:

this.state = { fields: {} }

bu yüzden ilk oluşturulması sırasında boş bir nesne olarak alanlar, this.state.fields.nameolacak undefinedve giriş alanı değerini olarak alacak:

value={undefined}

Bu nedenle, giriş alanı kontrolsüz hale gelecektir.

Girişe herhangi bir değer girdiğinizde, fieldsdurum şu şekilde değiştirilir:

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

Ve o zaman girdi alanı kontrollü bir bileşene dönüştürülür; bu yüzden hatayı alıyorsunuz:

Bir bileşen, kontrol edilecek metin türünün kontrolsüz bir girişini değiştiriyor.

Olası çözümler:

1- fieldsDurumunu şu şekilde tanımlayın :

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

2- Veya aşağıdaki gibi Kısa devre değerlendirmesini kullanarak değer özelliğini tanımlayınız :

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

Değişen valueiçin defaultValuebunu çözecektir.

Not :

defaultValuesadece ilk yükleme içindir. Başlatırsanız inputo zaman kullanmalısınız defaultValue, ancak statedeğeri değiştirmek için kullanmak istiyorsanız kullanmanız gerekir value. Daha fazlası için bunu okuyun .

Kullandığım value={this.state.input ||""}içinde inputo uyarı kurtulmak için.

Bileşenin içine giriş kutusunu aşağıdaki şekilde yerleştirin.

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

SADECE, önce başlangıç ​​durumunu ayarlamanız gerekir

Başlangıç ​​durumu reaksiyonunu ayarlamazsanız, bunu kontrolsüz bir bileşen olarak görür

Kabul edilen cevaba ek olarak, bir inputtür kullanıyorsanız checkboxveya radionull / undefined checkedözelliğini de kontrol etmem gerektiğini buldum .

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

TS (veya Babel) kullanıyorsanız, mantıksal OR operatörü yerine nullish birleştirme kullanabilirsiniz:

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

Önce Geçerli Durumu Ayarla ...this.state

Çünkü yeni bir durum atayacağınız zaman tanımsız olabilir. böylece durum çıkarma akım durumu da ayarlanarak sabitlenecektir

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

Durumunuzda bir nesne varsa, durumu aşağıdaki gibi ayarlamanız gerekir; kullanıcı nesnesinin içinde kullanıcı adı ayarlamanız gerektiğini varsayalım.

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

const [name, setName] = useState()

metin alanına yazdığınızda hata üretir

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

sorunu bu dize örneğinde düzeltir.

Açık alanda birden fazla giriş kullanıyorsanız aşağıdakileri uygulayın: Örneğin:

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>
     ); 
  }
}

Sorununuzu şurada arayın:

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

Reaksiyon Kancalarını kullanmak da başlangıç ​​değerini ayarlamayı unutmayın.
Kullanıyordum <input type='datetime-local' value={eventStart} />ve ilk eventStartşey gibiydi

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

Parantez içindeki boş dize farktır.
Ayrıca, benim gibi gönderdikten sonra formu sıfırlarsanız, yalnızca boş parantez için değil, boş dizeye ayarlamanız gerekir.

Bu sadece bu konuya yaptığım küçük katkı, belki birine yardım edecek.

Benim durumumda Mayank Shukla'nın en büyük cevabı söylüyordu. Tek detay, devletimin tamamen tanımladığım mülkten yoksun olmasıydı.

Örneğin, bu duruma sahipseniz:

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

Kodunuzu açılıyorsanız varsa, başka, bu yüzden yere yeni bir pervane eklemek için kodunuzda yeni bir özellik yaratabilir isteyebilirsiniz c, değeri yalnızca bileşenin durumu hakkında tanımsız değil ama özellik kendisi tanımlanmamış.

Bunu çözmek için sadece cdurumunuza eklediğinizden ve ona uygun bir başlangıç ​​değeri verdiğinizden emin olun .

Örneğin,

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

Umarım son durumumu açıklayabilirim.

Aynı uyarıyı alıyorum: Bir bileşen, denetlenecek gizli türdeki denetlenmeyen bir girdiyi değiştiriyor. Sorunumu çözemiyorum. Neden herhangi bir fikir?

export default ({  valueName, onChangeAllg,}) => {

          <TextField
            id={"name"}
            select
            label={"name"}
            value={valueName.geschlecht || ""}
            name={"name"}
            onChange={onChangeAllg}

          >
            {nameList.map((option) => (
              <MenuItem key={option.value} value={option.value}>
                {option.label}
              </MenuItem>
            ))}
          </TextField>

denedim ({ valueName, valueName: {geschlecht=""}, onChangeAllg,})vevalue={valueName.geschlecht || ""}

Uyarı: Bir bileşen, kontrol edilecek tip metinlerin kontrolsüz bir girişini değiştiriyor. Giriş elemanları kontrolsüzden kontrollü (veya tam tersi) olmamalıdır. Bileşenin ömrü boyunca kontrollü veya kontrolsüz giriş öğesi kullanma arasında seçim yapın.

Çözüm: Değerin tanımsız olup olmadığını kontrol edin

React / Formik / Önyükleme / TypeScript

misal :

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