I have created my first multipart form that I am nearly finished working on that is still not posting to my backend database. In terms of the logic to my handleSubmitDive, is this correct? I also have a dispatch to put the dive into the Redux store but do I need to do this if the API will be getting called again?
Uncaught TypeError: Object(...)(...).then is not a function
handleSubmitDive main.7fef6ae6fc5b0f4fac01.hot-update.js:126
React 14
unstable_runWithPriority scheduler.development.js:646
React 15
js main.chunk.js:13394
js main.chunk.js:13494
Webpack 7
diveLogForm.component.js:104
Uncaught TypeError: Object(...)(...).then is not a function
handleSubmitDive main.7fef6ae6fc5b0f4fac01.hot-update.js:126
React 14
unstable_runWithPriority scheduler.development.js:646
React 15
js main.chunk.js:13394
js main.chunk.js:13494
Webpack 7
...
Material-UI: You have provided an out-of-range value `undefined` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`. SelectInput.js:342
Material-UI: You have provided an out-of-range value `undefined` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are `5`, `7`, `8`, `1`, `12`, `3`, `13`, `2`, `4`, `10`, `9`, `11`, `6`, `14`. SelectInput.js:342
Material-UI: You have provided an out-of-range value `undefined` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are `1`, `2`, `3`, `4`. SelectInput.js:342
Material-UI: You have provided an out-of-range value `undefined` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are `0`, `1`, `2`, `3`, `4`. SelectInput.js:342
Material-UI: You have provided an out-of-range value `undefined` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are `1`, `2`, `3`, `4`
form
const [dive, setDive] = useState({
diveTypeID: "",
diveSchoolNameID: "",
diveCurrentID: "",
diveVisibilityID: "",
diveDate: "",
diveMaxDepth: "",
diverUserNumber: "",
diveVerifiedBySchool: "",
diveNotes: "",
diveSpotID: "",
divePhotos: ""
});
const handleChange = (property) => (e) => {
setDive({
// override the changed property and keep the rest
...dive,
[property]: e.target.value,
});
}
// get access to dispatch
const dispatch = useDispatch();
// useEffect with an empty dependency array is the same as componentDidMount
useEffect(() => {
dispatch(requireFieldData());
}, []);
// console.log(fields.data);
const handleSubmitDive = () => {
const diveLog = {
diveTypeID: dive.diveTypeID || undefined,
diveSchoolNameID: dive.diveSchoolNameID || undefined,
diveCurrentID: dive.diveCurrentID || undefined,
diveVisibilityID: dive.diveVisibilityID || undefined,
diveDate: dive.diveDate || undefined,
diveMaxDepth: dive.diveMaxDepth || undefined,
diverUserNumber: dive.diverUserNumber || undefined,
diveVerifiedBySchool: dive.diveVerifiedBySchool || undefined,
diveNotes: dive.diveNotes || undefined,
diveSpotID: dive.diveSpotID || undefined,
divePhotos: dive.divePhotos || undefined
}
// do some stuff with the form
createDiveLog(diveLog).then((data) => {
if (data.error) {
setDive({ ...dive, error: data.error})
} else {
setDive({ ...dive, error: '', open: true})
}
})
dispatch(addDive(dive));
}
function MaterialUIPickers() {
// The first commit of Material-UI
const [selectedDate, setSelectedDate] = React.useState(new
Date('2014-08-18T21:11:54'));
const handleDateChange = (date) => {
setSelectedDate(date);
};
}
const classes = useStyles;
return (
// <AppBar title="Enter your dive details"></AppBar>
<>
<form onSubmit={handleSubmitDive}>
<Container maxWidth="lg">
<Grid container fixed spacing={3}
direction="row"
justify="center"
alignItems="center">
<Grid item xs={4}>
{/*<FormControl className={classes.formControl}>*/}
<PopulateDropdown
dataList={diveTypeList} // the options array
titleProperty={"diveType"} // option label property
valueProperty={"diveTypeID"} // option value property
label="Dive Type Name" // label above the select
placeholder="Select dive type" // text show when empty
value={dive.typeID} // get value from state
onChange={handleChange("typeID")} // update state on change
/>
{/*</FormControl>*/}
</Grid>
<Grid item xs={4}>
{/*<FormControl className={classes.formControl}>*/}
<PopulateDropdown
dataList={diveSchoolList} // the options array
titleProperty={"diveSchoolName"} // option label property
valueProperty={"diveSchoolID"} // option value property
label="Dive School Name" // label above the select
placeholder="Select dive school" // text show when empty
value={dive.schoolNameID} // get value from state
onChange={handleChange("schoolNameID")} // update state on change/>
/>
{/*</FormControl>*/}
</Grid>
<Grid item xs={4}>
<FormControl className={classes.formControl}>
<InputLabel labelId="Enter-the-max-depth">Max Depth</InputLabel>
<Select
id="Enter-the-max-depth"
label="Max Depth"
value={dive.maxDepth}
onChange={handleChange("maxDepth")}>
<MenuItem value={0}>10</MenuItem>
<MenuItem value={1}>10-20</MenuItem>
<MenuItem value={2}>20-30</MenuItem>
<MenuItem value={3}>30-40</MenuItem>
<MenuItem value={4}>40+</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={4}>
<TextField
placeholder="Diver User Number"
label="DiverUserNumber"
defaultValue={props.user.userID}
margin="normal"
value={props.user.userID}
onChange={handleChange("userID")}
fullWidth/>
</Grid>
<Grid item xs={4}>
<TextField
placeholder="false"
label="verifiedDive"
defaultValue={false}
margin="normal"
value={dive.verifiedBySchool}
onChange={handleChange("verifiedBySchool")}
fullWidth/>
</Grid>
<Grid item xs={4}>
{/*<FormControl className={classes.formControl}>*/}
<PopulateDropdown
dataList={diveSpotList} // the options array
titleProperty={"diveLocation"} // option label property
valueProperty={"diveSpotID"} // option value property
label="Dive Spot" // label above the select
placeholder="Select Dive Spot" // text show when empty
value={dive.diveSpotID} // get value from state
onChange={handleChange("diveSpotID")}/>
{/*</FormControl>*/}
</Grid>
<Grid item xs={4}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date picker inline"
value={null}
onChange={handleChange("date")}
KeyboardButtonProps={{
'aria-label': 'change date',
}}/>
</MuiPickersUtilsProvider>
</Grid>
<Grid item xs={10}>
<TextField
placeholder="Dive Notes"
label="Dive Notes"
margin="normal"
multiline={true}
rows={4}
value={null}
onChange={handleChange("notes")}
fullWidth/>
</Grid>
<br />
<br />
<br />
<Grid item xs={4}>
<div class="form-control">
<label for="photos">Photo Upload</label>
<input
type="file"
id="photo"
value={dive.photos}
onChange={handleChange("photos")}/>
{/*<input type="file" className="form-control-photo-uploader" onChange ={this.uploadFile}/>*/}
</div>
</Grid>
<br />
<Grid item md={9}>
<Button variant="primary" type="submit">
Submit</Button>
</Grid>
<br />
</Grid>
</Container>
</form>
action
export const registerUserDive = async (params, credentials, diveLog) => {
try {
let response = await fetch('/api/divelog/registerdive' + + params.userId, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Authorization': 'Bearer ' + credentials.t
},
body: diveLog
})
return await response.json()
} catch(err) {
console.log(err)
}
}