'Screen goes white after state change React, Redux, Redux-Thunk
I'm having an issue with React. when I get data by calling an API, data comes back perfectly fine, it loads and displays in a table. On the other hand, when I tried to add data to the DB using the user interface, it works, the request returns 200, and the data is in the database, but after all is finished on the React end, the screen turns white. The proper route still shows up in the browser, yet the screen for that route turns blank after, what only seems to be POST actions. Here is my code.
component code to add an event to the DB
const AddEventModal = (props: any) => {
const dispatch = useDispatch();
const onSubmit = (event: any) => {
event.preventDefault();
let eventData: Event = {
eventName: event.target[1].value,
location: event.target[2].value,
eventDate: event.target[3].value,
startTime: event.target[4].value,
endTime: event.target[5].value,
};
dispatch(addingEventToDb);
dispatch(addEventAsyncToDB(eventData));
props.toggleShow = false;
};
return (
<MDBModal
show={props.basicModal}
setShow={props.setBasicModal}
tabIndex="-1"
>
......tsx code
</MDBModal>
);
};
Here is what the Thunk looks like.
export const addEventAsyncToDB = (event:Event) => {
return (dispatch:any) => {
return addEvent(event).then(res => {
dispatch(addedEventToDBAction(res?.data));
})
}
}
And here is the actual AJAX code thats being called
export const addEvent = async (event: Event) => {
try{
const res = await axios.post(`${baseURI}/Events`, event);
return res;
}
catch(e){
console.log(e);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
