Fetch not working after switch from class to functional component - reactjs

Question

I'm converting some class components to functional.
Console.log(data) returns the expected output but then once i try to set it using useState and check the value, it returns an empty array.
On the class component its working by using the state.
Functional Component ( Not Working )
const [submitting, setSubmitting] = useState(false)
const [watingForResult, setWaitingForResult] = useState(false)
const [submission, setSubmission] = useState([]);
const [scoringResults, setScoringResults] = useState([]);
+
function submitSubmission() {
setSubmitting(true);
setResult([]);
setError('');
let data = {
code: btoa(code),
language: { name: language.name },
users: { username: parseLocalJwt().username },
problem: { name: textToLowerCaseNoSpaces(problem.name) }
}
fetch(URL + '/submission', {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
...getAuthorization(),
'Content-Type': 'application/json'
})
}).then(res => res.json()).then(data => {
setSubmitting(true);
setWaitingForResult(true);
setSubmission(data);
console.log('submitSubmission' + JSON.stringify(data));
window.secondsWaiting = new Date().getTime();
window.resultsListener = setInterval(fetchForResults(data.id), 1000);
});
}
...
function fetchForResults() {
console.log('data on fetchForResults' + submission.id)
}
...
<button
type="button"
onClick={submitSubmission}>
Submit!
</button>
console.log screenshot
Class component ( Working )
super(props);
this.state = {
problem: [],
sentSubmission: {
submitting: false,
waitingForResults: false,
submission: [],
scoringResults: []
},
results: {
loaded: false,
result: [],
error: ''
},
language: { mode: 'java', name: 'Java' },
code: ``
}
submitSubmission() {
this.setState({ sentSubmission: { submitting: true }, results: { result: [], error: '' } })
let data = {
code: btoa(this.state.code),
language: { name: this.state.language.name },
users: { username: parseLocalJwt().username },
problem: { name: textToLowerCaseNoSpaces(this.state.problem.name) }
}
fetch(URL + '/submission', {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
...getAuthorization(),
'Content-Type': 'application/json'
})
}).then(res => res.json()).then(data => {
this.setState({ sentSubmission: { submitting: true, waitingForResults: true, submission: data } })
window.secondsWaiting = new Date().getTime();
window.resultsListener = setInterval(this.fetchForResults, 1000);
});
}

Answer 1

Some portion of the code is missing but, since you switched from a class component's state to a functional component state, I guess the issue is related to how you are using your state.
In functional components, when you set your state, you are changing the whole object in your state. So, when in your code you do setSentSubmission({ submitting: true });, your state becomes:
previousState = {
submitting: false,
waitingForResults: false,
submission: [],
scoringResults: []
}
nextState = {
submitting: true
//you lost watingForResults, submissions and scoring results
}
When using useState it is always suggested to decompose your object in different states:
const [submitting, setSubmitting] = useState(false)
const [watingForResult, setWaitingForResult] = useState(false)
//and so on...
//And then update them singularly:
//This...
setSentSubmission({ submitting: true });
//... become this
setSubmitting(true);
Finally, side note on lists. If you need to add a single element to a list in your state you can do:
setListState(currentList => [...currentList, newElement])
If this approach doesn't fit your use case and you need a more complex state management system I suggest you to look at useReducer (link).
Update
To print the content of your fetch you have either 2 choices.
Print directly the content retrieved in your fetch function
fetch('http://myendpoint.com/mydata.json')
.then(response => response.json())
.then(data => console.log(data));
If you need to do some processing to your data and you want to print what is the content of your updated state you can just use a useEffect hook. For instance, if you want to print the content of your scoringResult state you just write:
useEffect(() => {
console.log(scoringResult)
},[scoringResult])
This hook will be triggered every time scoringResult is updated (plus once when the component was mounted in the beginning)

Answer 2

Problem with your code is this:
setSentSubmission(...)
console.log(data);
console.log(sentSubmission.submission)
You can not set state and then to expect immediately to access that new state, new state can be accessed after component rerenders(in next iteration), all this is because you are reading sentSubmission.submission from closure which will be recreated only when component rerenders. So everything works fine with you code, you are just doing logging in a wrong place, move that log outside of the submitSubmission and you will see that state is updated successfully and that log will be printed after component rerenders(state updates).

Answer 3

When function submit() call, you set new value for sentSubmission.
Try this instead:
setSentSubmission((prevState) => (…prevState, { submitting: true }));