React - alterando uma entrada não controlada

Eu tenho um componente de reação simples com o formulário que acredito ter uma entrada controlada:

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

    onFieldChange(fieldName) {
        return function (event) {
            this.setState({[fieldName]: event.target.value});
        }
    }
}

export default MyForm;

Quando executo meu aplicativo, recebo o seguinte aviso:

Aviso: O MyForm está alterando uma entrada não controlada do tipo de texto a ser controlado. Os elementos de entrada não devem mudar de não controlado para controlado (ou vice-versa). Decida entre usar um elemento de entrada controlado ou não controlado durante a vida útil do componente

Acredito que minha entrada é controlada, pois tem um valor. Eu estou querendo saber o que estou fazendo de errado?

Estou usando o React 15.1.0

Acredito que minha entrada é controlada, pois tem um valor.

Para que uma entrada seja controlada, seu valor deve corresponder ao de uma variável de estado.

Essa condição não foi atendida inicialmente no seu exemplo porque this.state.namenão foi definida inicialmente. Portanto, a entrada é inicialmente não controlada. Uma vez que o onChangemanipulador é acionado pela primeira vez, this.state.nameé definido. Nesse ponto, a condição acima é satisfeita e a entrada é considerada controlada. Essa transição de não controlado para controlado produz o erro visto acima.

Inicializando this.state.nameno construtor:

por exemplo

this.state = { name: '' };

a entrada será controlada desde o início, corrigindo o problema. Consulte Reagir componentes controlados para obter mais exemplos.

Não relacionado a esse erro, você deve ter apenas uma exportação padrão. O seu código acima tem dois.

Quando você tornar o seu componente, this.state.namenão está definido, por isso é avaliado como undefinedou null, e você acaba passando value={undefined}ou value={null}ao seu input.

Quando cheques ReactDOM para ver se um campo é controlado, ele verifica para ver sevalue != null (note que é !=, não !==), e uma vez undefined == nullem JavaScript, ele decide que é descontrolada.

Portanto, quando onFieldChange()é chamado, this.state.nameé definido como um valor de sequência, sua entrada passa de descontrolada para controlada.

Se você faz this.state = {name: ''}no seu construtor, porque '' != null, sua entrada terá um valor o tempo todo e essa mensagem desaparecerá.

Outra abordagem pode ser definir o valor padrão dentro da sua entrada, assim:

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

Eu sei que outros já responderam isso. Mas um fator muito importante aqui pode ajudar outras pessoas com problemas semelhantes:

Você deve ter um onChangemanipulador adicionado ao seu campo de entrada (por exemplo, campo de texto, caixa de seleção, rádio, etc.). Sempre lide com a atividade através do onChangemanipulador.

Exemplo:

<input ... onChange={ this.myChangeHandler} ... />

Quando você está trabalhando com a caixa de seleção, pode ser necessário lidar com seu checkedestado !!.

Exemplo:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

Referência: https://github.com/facebook/react/issues/6779#issuecomment-326314716

A solução simples para resolver esse problema é definir um valor vazio por padrão:

<input name='myInput' value={this.state.myInput || ''} onChange={this.handleChange} />

Uma desvantagem em potencial ao definir o valor do campo como "" (sequência vazia) no construtor é se o campo for um campo opcional e for deixado sem edição. A menos que você faça alguma massagem antes de postar seu formulário, o campo será mantido no armazenamento de dados como uma sequência vazia em vez de NULL.

Essa alternativa evitará cadeias vazias:

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

... 

<input name="name" type="text" value={this.state.name || ''}/>

Ao usar onChange={this.onFieldChange('name').bind(this)}em sua entrada, você deve declarar a cadeia vazia do seu estado como um valor do campo de propriedade.

maneira incorreta:

this.state ={
       fields: {},
       errors: {},
       disabled : false
    }

Maneira correta:

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }

No meu caso, estava faltando algo realmente trivial.

<input value={state.myObject.inputValue} />

Meu estado era o seguinte quando recebi o aviso:

state = {
   myObject: undefined
}

Ao alternar meu estado para referenciar a entrada do meu valor , meu problema foi resolvido:

state = {
   myObject: {
      inputValue: ''
   }
}

Se os props do seu componente foram passados ​​como um estado, coloque um valor padrão para suas tags de entrada

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>

Defina um valor para a propriedade 'name' no estado inicial.

this.state={ name:''};

Uma atualização para isso. Para ganchos de reação, useconst [name, setName] = useState(" ")

Isso geralmente acontece apenas quando você não está controlando o valor do arquivado quando o aplicativo foi iniciado e após algum evento ou função disparar ou o estado ser alterado, agora você está tentando controlar o valor no campo de entrada.

Essa transição de não ter controle sobre a entrada e depois ter controle sobre ela é o que faz com que o problema ocorra em primeiro lugar.

A melhor maneira de evitar isso é declarando algum valor para a entrada no construtor do componente. Para que o elemento de entrada tenha valor desde o início do aplicativo.

Para definir dinamicamente propriedades de estado para entradas de formulário e mantê-las controladas, você pode fazer algo assim:

const inputs = [
    { name: 'email', type: 'email', placeholder: "Enter your email"},
    { name: 'password', type: 'password', placeholder: "Enter your password"},
    { name: 'passwordConfirm', type: 'password', placeholder: "Confirm your password"},
]

class Form extends Component {
  constructor(props){
    super(props)
    this.state = {} // Notice no explicit state is set in the constructor
  }

  handleChange = (e) => {
    const { name, value } = e.target;

    this.setState({
      [name]: value
    }
  }

  handleSubmit = (e) => {
    // do something
  }

  render() {
     <form onSubmit={(e) => handleSubmit(e)}>
       { inputs.length ?
         inputs.map(input => {
           const { name, placeholder, type } = input;
           const value = this.state[name] || ''; // Does it exist? If so use it, if not use an empty string

           return <input key={name}  type={type} name={name} placeholder={placeholder} value={value} onChange={this.handleChange}/>
       }) :
         null
       }
       <button type="submit" onClick={(e) => e.preventDefault }>Submit</button>
     </form>    
  }
}

Simplesmente crie um fallback para '' se o this.state.name for nulo.

<input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

Isso também funciona com as variáveis ​​useState.