I am trying to create the final stage of a multitype form that I have created in React. I think I am close to creating a handleSubmit method for posting my multipart form data to my backend database however I am getting the below erros messages relating to CORS issues.
Am I going about adding to my Redux store and my backend the right way? Do I need to add some sort of parser to my service “createDiveSpot” method to seperate the text, numbers and images?
error messages when rendering page
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
error on console
// state for the current field value
const [spot, setSpot] = useState({
diveLocation: "",
diveRegionID: "",
diveTypeID: "",
diveSpotDescription: "",
diveSpotPhotos: "",
error: ''
});
// all onChange functions do the exact same thing, so you only need one
// pass to a component like onChange={handleChange('typeID')}
const handleChange = (property) => (e) => {
setSpot({
// override the changed property and keep the rest
...spot,
[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());
}, []);
const handleSubmitDiveSpot = () => {
const diveSpot = {
diveLocation: spot.diveLocation || undefined,
diveRegionID: spot.diveRegionID || undefined,
diveSpotTypeID: spot.diveSpotTypeID || undefined,
diveSpotDescription: spot.diveSpotDescription || undefined,
diveSpotPhotos: spot.diveSpotPhotos || undefined
}
// do some stuff with the form
createDiveSpot(diveSpot).then((data) => {
if (data.error) {
setSpot({ ...spot, error: data.error})
} else {
setSpot({ ...spot, error: '', open: true})
}
})
// do we need to save this to the backend? or just to redux?
dispatch(addDiveSpot(spot));
}
const classes = useStyles;
return (
// <AppBar title="Enter your dive details"></AppBar>
<form className="diveSpotForm" method="POST" encType="multipart/form-data" onSubmit={handleSubmitDiveSpot}>
<>
<Grid container spacing={3}
direction="row"
justify="center"
alignItems="center">
<Grid item xs={4}>
<FormControl className={classes.formControl}>
<PopulateDropdown
dataList={diveTypeList}
titleProperty={"diveType"} // option label property
valueProperty={"diveTypeID"} // option value property
name="diveType"
placeholder="Dive Type"
label="Select Dive Type"
value={spot.diveTypeID}
onChange={handleChange("diveTypeID")}/>
</FormControl>
</Grid>
<br />
<Grid item xs={4}>
<FormControl className={classes.formControl}>
<PopulateDropdown
dataList={regionList}
titleProperty={"diveRegion"} // option label property
valueProperty={"diveRegionID"} // option value property
name="diveRegion"
placeholder="Dive Region"
label="Select Region"
value={spot.diveRegionID}
onChange={handleChange("regionID")}/>
</FormControl>
</Grid>
<br />
<Grid item xs={4}>
<TextField
label="diveLocation"
placeholder="Dive Location"
name="diveLocation"
margin="normal"
value={spot.diveLocation}
onChange={handleSubmitDiveSpot("diveLocation")}/>
</Grid>
<br />
<Grid item xs={10}>
<FormControl fullWidth className={classes.margin}>
<TextField
label="Description"
name="diveSpotDescription"
value={spot.diveSpotDescription}
onChange={handleSubmitDiveSpot("diveSpotDescription")}
multiline
rowsMax={6}/>
</FormControl>
</Grid>
<br />
<Grid item xs={12}>
<FormControl fullWidth className={classes.margin}>
<label for="photos">Photo Upload</label>
<input
type="file"
name="photo"
value={spot.diveSpotPhotos}
onChange={handleSubmitDiveSpot("diveSpotPhotos")}/>
</FormControl>
</Grid>
<br />
<Grid item xs={3}>
<Button variant="primary" type="submit">
Submit</Button>
<br />
</Grid>
</Grid>
</>
</form>