zeigt den Wert leer auch nach dem Wert im Textfeld

Question

Ich habe ein Formular, wo Daten vom Server abgerufen werden und wird in das Textfeld angezeigt. Obwohl die Daten im Textfeld sind, wenn ich auf Speichern klicke, bekomme ich Fehler auf allen Feldern, die folgende Felder anzeigen, darf nicht leer sein. Auch wenn ich versuche, den Wert zu ändern, kann ich keinen Text eingeben, auch kann ich den Text nicht löschen. Warum wird der Wert leer angezeigt, wenn der Wert dort ist?

const mapStateToProps = createStructuredSelector({ 
    cloudinaryData: selectCloudinary() 
}); 

class Cloudinary extends React.Component { 
    state = { 
    cloudinary: { 
     cloudinary_cloud_name: "", 
     cloudinary_api_key: "", 
    }, 
    errors: {} 
    }; 

    componentDidMount() { 
    this.props.loadCloudinary(); 
    } 

    handleChange = event => { 
    const fieldName = event.target.name; 
    this.setState(
     { 
     cloudinary: { 
      ...this.state.cloudinary, 
      [event.target.name]: event.target.value 
     } 
     }, 
    () => { 
     this.validateField([fieldName]); 
     } 
    ); 
    }; 


    handleSubmit = event => { 
    event.preventDefault(); 
    this.props.requestCloudinary(this.state.cloudinary); 
    }; 

    render() { 
    const { cloudinary, errors } = this.state; 
    const { cloudinaryData } = this.props; 
    if (cloudinaryData.size === 0) { 
     return <div>Fetching Data...</div>; 
    } 
    return (
     <form onSubmit={this.handleSubmit}> 
     <TextFieldGroup 
      name="cloudinary_cloud_name" 
      type="text" 
      value={ 
      cloudinaryData 
       ? cloudinaryData.cloudinary_cloud_name 
       : cloudinary.cloudinary_cloud_name 
      } 
      onChange={this.handleChange} 
      onBlur={this.handleBlur} 
      error={errors.cloudinary_cloud_name} 
     /> 
     <button className="btn btn-primary">Save changes</button> 
     </form> 
    ); 
    } 
} 

Answer 1

Es ist, weil Sie den Wert auf Requisiten anstelle Ihres Staates setzen sich hier:

<TextFieldGroup 
    name="cloudinary_cloud_name" 
    type="text" 
    value={ 
    cloudinaryData 
     ? cloudinaryData.cloudinary_cloud_name 
     : cloudinary.cloudinary_cloud_name 
    } 
    onChange={this.handleChange} 
    onBlur={this.handleBlur} 
    error={errors.cloudinary_cloud_name} 
/> 

Stattdessen einen Konstruktor erstellen und Ihr Zustand auf Ihre Requisiten initialisieren und ersetzen Sie Ihren Wert Zustand zu verwenden:

const mapStateToProps = createStructuredSelector({ 
    cloudinaryData: selectCloudinary() 
}); 

class Cloudinary extends React.Component { 

    constructor(props){ 
     super(props); 
     state = { 
      cloudinary: { 
      cloudinary_cloud_name: props.cloudinaryData.cloudinary_cloud_name, 
      cloudinary_api_key: props.cloudinaryData.cloudinary_api_key, 
     }, 
     errors: {} 
    } 
    } 

    componentDidMount() { 
    this.props.loadCloudinary(); 
    } 

    handleChange = event => { 
    const fieldName = event.target.name; 
    this.setState(
     { 
     cloudinary: { 
      ...this.state.cloudinary, 
      [event.target.name]: event.target.value 
     } 
     }, 
    () => { 
     this.validateField([fieldName]); 
     } 
    ); 
    }; 


    handleSubmit = event => { 
    event.preventDefault(); 
    this.props.requestCloudinary(this.state.cloudinary); 
    }; 

    render() { 
    const { cloudinary, errors } = this.state; 
    const { cloudinaryData } = this.props; 
    if (cloudinaryData.size === 0) { 
     return <div>Fetching Data...</div>; 
    } 
    return (
     <form onSubmit={this.handleSubmit}> 
     <TextFieldGroup 
      name="cloudinary_cloud_name" 
      type="text" 
      value={cloudinary.cloudinary_cloud_name} 
      onChange={this.handleChange} 
      onBlur={this.handleBlur} 
      error={errors.cloudinary_cloud_name} 
     /> 
     <button className="btn btn-primary">Save changes</button> 
     </form> 
    ); 
    } 
}