Est-ce que redux confuse réagit en détectant les composants "contrôlés" ou est-ce que je fais cela mal?

Question

Le code suivant devient l'avertissement:

Warning: Filter is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 

Filter.js:

import React  from 'react'; 
import { connect } from 'react-redux'; 

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

    setFilter = (event) => { 
    let v = event.target.value 

    if (v.length === 0) v = null; 

    this.props.dispatch({ 
     type: 'SET_FILTER', 
     filter: v 
    }); 
    } 

    render() { 
    return (
     <p> 
     <input id='filter' className='form-control' onChange={this.setFilter} value={this.props.state.filter} /> 
     </p> 
    ); 
    } 
} 
const mapStateToProps = (state, ownProps) => { 
    return { 
    state: state 
    } 
} 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    dispatch: dispatch 
    } 
} 

Filter = connect(mapStateToProps, mapDispatchToProps)(Filter) 
export default Filter 

Je vais avoir du mal à voir comment cela différent de l'exemple de la documentation, sauf que j'utilise le Redux Etat.

<input type="text" value={this.state.value} onChange={this.handleChange} /> 

Mais je ne pouvais manquer quelque chose ...

Answer 1

Ne réglez pas la valeur input à null ou undefined. Cela fait penser que c'est incontrôlé. Si vous souhaitez conserver null comme valeur au lieu de "", modifiez-la simplement lorsque vous la transmettez en tant que support à la saisie. Cela devrait éviter l'erreur:

<input id='filter' 
    className='form-control' 
    onChange={this.setFilter} 
    value={this.props.state.filter || ""} // note the || "" 
/>