即使在文本字段中有值後也顯示爲空值

Question

我有一種從服務器獲取數據並顯示到文本字段的表單。雖然數據在文本字段中，但當我點擊保存按鈕時，出現錯誤顯示以下字段的所有字段不能爲空。此外，當我嘗試更改值，我不能輸入任何文本既不能刪除文本。爲什麼價值在那裏有價值時顯示爲空？

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

這是因爲你的值設置爲道具，而不是你的狀態在這裏：

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

相反，創建一個構造函數和初始化狀態，你的道具和替換你的價值使用狀態：

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