我有一个正在执行验证的表格。 验证在某些字段上工作正常，并且不适用于将Firestore数据绑定到的下拉列表。
并且在validate函数中，我正在清除错误消息，但setState不会立即更新状态。
任何帮助均已取消
我的个人资料组件
import React, { Component } from "react";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import CircularProgress from '@material-ui/core/CircularProgress';
import InputLabel from "@material-ui/core/InputLabel";
import TextField from '@material-ui/core/TextField';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import IconButton from '@material-ui/core/IconButton';
// core components
import GridItem from "../uiComponents/Grid/GridItem.jsx";
import GridContainer from "../uiComponents/Grid/GridContainer.jsx";
import CustomInput from "../uiComponents/CustomInput/CustomInput";
import Button from "../uiComponents/CustomButtons/Button.jsx";
import Card from "../uiComponents/Card/Card.jsx";
import CardHeader from "../uiComponents/Card/CardHeader.jsx";
import CardBody from "../uiComponents/Card/CardBody.jsx";
import CardFooter from "../uiComponents/Card/CardFooter.jsx";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { connect } from 'react-redux'
import { firestoreConnect } from 'react-redux-firebase'
import { compose } from 'redux'
import firebase from '../../config/fbConfig'
import { UpdateUser } from '../../store/actions/droneSPActions'
import { storage } from '../../config/fbConfig'
import MenuItem from '@material-ui/core/MenuItem';
import { Redirect } from 'react-router-dom'
import Snackbar from '@material-ui/core/Snackbar';
import CloseIcon from '@material-ui/icons/Close';
const styles = {
cardCategoryWhite: {
color: "rgba(255,255,255,.62)",
margin: "0",
fontSize: "14px",
marginTop: "0",
marginBottom: "0"
},
textField: {
fontSize: '5px'
},
cardTitleWhite: {
color: "#FFFFFF",
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
marginBottom: "3px",
textDecoration: "none"
}
};
const service = [
{
value: 'Services',
label: 'Services',
},
{
value: 'Eqipments',
label: 'Eqipments',
}
];
const country = [
{
value: 'INDIA',
label: 'INDIA',
},
{
value: 'FRANCE',
label: 'FRANCE',
},
{
value: 'GERMANY',
label: 'GERMANY',
}
];
class UserProfile extends Component {
state = {
loading: false,
open: false,
message: '',
sp_Name: '', sp_NameError: '',
sp_Phone: '', sp_PhoneError: '',
sp_Role: '', sp_RoleError: '',
sp_Location: '', sp_LocationError: '',
sp_Service: '', sp_ServiceError: '',
sp_Country: '', sp_CountryError: '',
sp_Message: '', sp_MessageError: '',
sp_License: '', sp_LicenseError: '',
}
//for edit- bind details
componentDidMount() {
const ref = firebase.firestore().collection('users').doc(this.props.auth.uid);
ref.get().then((doc) => {
if (doc.exists) {
const users = doc.data();
this.setState({
//key: doc.id,
sp_Name: users.sp_Name,
sp_Phone: users.sp_Phone,
sp_Role: users.sp_Role,
sp_Location: users.sp_Location,
sp_Service: users.sp_Service,
sp_Country: users.sp_Country,
sp_Message: users.sp_Message,
sp_License: users.sp_License,
});
} else {
console.log("No such document!");
}
});
}
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
})
}
ClearError = () => {
this.setState({
sp_NameError: '',
sp_PhoneError:'',
sp_LocationError: '',
sp_ServiceError: '',
sp_CountryError: '',
sp_MessageError: '',
sp_LicenseError: '',
})
console.log('cleared')
}
isValid = () => {
//this.ClearError();
this.setState({
sp_NameError: '',
sp_PhoneError:'',
sp_LocationError: '',
sp_ServiceError: '',
sp_CountryError: '',
sp_MessageError: '',
sp_LicenseError: '',
}, ()=>{
console.log('validate clcik')
console.log(this.state)
})
let isError = false;
const errors = {};
if (this.state.sp_Name == '' || this.state.sp_Name === undefined) {
isError = true
errors.sp_NameError = "Enter Name ";
}
if (this.state.sp_Phone == '' || this.state.sp_Phone === undefined) {
isError = true
console.log('entee')
errors.sp_PhoneError = "Enter Phone Number "
}
if (this.state.sp_Location == '' || this.state.sp_Location === undefined) {
isError = true
errors.sp_LocationError = "Enter Location "
}
if (this.state.sp_Country == '' || this.state.sp_Country === undefined) {
isError = true
errors.sp_CountryError = "Select Country "
}
if (this.state.sp_Role == '' || this.state.sp_Role === undefined) {
isError = true
errors.sp_RoleError = "Select Role "
}
if (this.state.sp_Service == '' || this.state.sp_Service === undefined) {
isError = true
errors.sp_ServiceError = "Select Service / Equipments "
}
if (isError) {
this.setState({
...this.state,
...errors
})
}
}
handleChangedropdown = name => e => {
this.setState({ [name]: e.target.value });
};
openSnackbar = ({ message }) => {
this.setState({
open: true,
message,
});
};
handleSubmit = (e) => {
e.preventDefault();
let uid = this.props.auth.uid;
const { sp_License } = this.state;
if (this.isValid()) {
this.setState({ loading: true })
const Lfilename = this.state.sp_Name + '_' + new Date().getTime();
const uploadTask = storage.ref('License/' + Lfilename).put(sp_License);
uploadTask
.then(uploadTaskSnapshot => {
return uploadTaskSnapshot.ref.getDownloadURL();
})
.then(url => {
this.setState({ sp_License: url });
const stateObj = this.state;
// delete stateObj['loading'];
// delete stateObj['open'];
// delete stateObj['message'];
this.props.UpdateUser(uid, stateObj)
this.openSnackbar({ message: 'Submitted Successfully.!' });
// .then(() => {
// this.setState({ loading: false })
// toast("Registered Successfully.!", { type: toast.TYPE.INFO, autoClose: 5000 });
// }).catch((error)=>{
// })
});
}
}
fileChangeHandler = (e) => {
console.log(e.target.files[0])
this.setState({
[e.target.id]: e.target.files[0]
})
}
render() {
const { classes, role, auth, authError } = this.props;
const { loading } = this.state;
const message = (
<span
id="snackbar-message-id"
dangerouslySetInnerHTML={{ __html: this.state.message }}
/>
);
if (!auth.uid) return <Redirect to='/signin' />
return (
<div>
<GridContainer>
<GridItem xs={12} sm={12} md={12}>
<Card>
<CardHeader color="primary">
<h4 className={classes.cardTitleWhite}>Drone Service Inclusion Form</h4>
</CardHeader>
<form onSubmit={this.handleSubmit}>
<CardBody>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<TextField
id="sp_Name"
label="Name"
type="text"
fullWidth
className={classes.textField}
value={this.state.sp_Name}
error={!!this.state.sp_NameError}
helperText={this.state.sp_NameError}
onChange={this.handleChange}
margin="normal"
required="true"
/>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<TextField
id="sp_Phone"
label="Phone"
type="number"
fullWidth
className={classes.textField}
value={this.state.sp_Phone}
error={!!this.state.sp_PhoneError}
helperText={this.state.sp_PhoneError}
onChange={this.handleChange}
margin="normal"
required
/>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<TextField
id="sp_Location"
label="Location"
type="text"
fullWidth
className={classes.textField}
value={this.state.sp_Location}
error={!!this.state.sp_LocationError}
helperText={this.state.sp_LocationError}
onChange={this.handleChange}
margin="normal"
required
/>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<TextField
id="sp_Country"
select
label="Select Country"
fullWidth
required
className={classes.textField}
value={this.state.sp_Country}
error={!!this.state.sp_CountryError}
helperText={this.state.sp_CountryError}
onChange={this.handleChangedropdown('sp_Country')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
margin="normal"
>
{country.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<TextField
id="sp_Role"
select
label="Select Role"
fullWidth
required
className={classes.textField}
value={this.state.sp_Role}
helperText={this.state.sp_RoleError}
error={!!this.state.sp_RoleError}
onChange={this.handleChangedropdown('sp_Role')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
margin="normal"
>
{role && role.map(option => (
// {option.role_ActiveFlag==="1"}?
<MenuItem key={option.id} value={option.role_Name}>
{option.role_Name}
</MenuItem>
// :null
))}
</TextField>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<TextField
id="sp_Service"
select
label="Select Service/Eqipments"
fullWidth
required
className={classes.textField}
value={this.state.sp_Service}
helperText={this.state.sp_ServiceError}
error={!!this.state.sp_ServiceError}
onChange={this.handleChangedropdown('sp_Service')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
// helperText="Please select your Service/Eqipments"
margin="normal"
>
{service.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={12}>
{/* <InputLabel style={{ color: "#AAAAAA" }}>About me</InputLabel>
<textarea name="sp_message" id="sp_message" rows={6} defaultValue={""} onChange={this.handleChange} /> */}
<TextField
id="sp_Message"
label="Message"
type="text"
multiline
fullWidth
rows="4"
variant="outlined"
className={classes.textField}
value={this.state.sp_Message}
onChange={this.handleChange}
margin="normal"
/>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={12}>
{/* <input accept="image/*" type='file' id='sp_License' onChange={this.fileChangeHandler} /> */}
{/* <input className={classes.input} onChange={this.fileChangeHandler} id="sp_License" type="file" />
<label htmlFor="sp_License">
<IconButton color="primary" className={classes.button} component="span">
<Fileupload />
</IconButton>
</label> */}
<Button variant="contained" color="default" onChange={this.fileChangeHandler} className={classes.button}>
Upload
<CloudUploadIcon className={classes.rightIcon} />
</Button>
</GridItem>
</GridContainer>
</CardBody>
<CardFooter>
<Button color="primary" onClick={this.handleSubmit} disabled={loading}>
{loading && <CircularProgress style={{ color: 'white', height: '20px', width: '20px', marginRight: '10px' }} />}
Update Profile
</Button>
</CardFooter>
</form>
</Card>
</GridItem>
</GridContainer>
{authError ? this.openSnackbar({ message: '{authError}' }) : null}
<Snackbar
open={this.state.open}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
message={message}
variant="error"
onClose={() => this.setState({ open: false, message: '' })}
action={
<IconButton
key="close"
aria-label="Close"
color="inherit"
className={classes.close}
onClick={() => this.setState({ open: false, message: '' })}
>
<CloseIcon className={classes.icon} />
</IconButton>
}
autoHideDuration="3000"
/>
</div>
);
}
}
const mapstateToProps = (state) => {
return {
role: state.firestore.ordered.spRoles,
auth: state.firebase.auth,
authError: state.authroot.autherr
}
}
const mapDispatchToProps = (dispatch, getState) => {
return {
UpdateUser: (id, droneSPDetails) => dispatch(UpdateUser(id, droneSPDetails))
}
}
export default compose(
withStyles(styles),
connect(mapstateToProps, mapDispatchToProps),
firestoreConnect([
{ collection: 'spRoles' }
])
)(UserProfile);