I have created a very basic function to illustrate my problem, cannot figure out what I am doing wrong here but I realise it is something to do with how I am handling the Moralis objects.
First the code:
import { useState } from "react";
import { Moralis } from 'moralis';
function Demo(props) {
const { teamId } = props;
const [ newScoresObject, setNewScoresObject ] = useState({
football: '',
rugby: '',
cricket: ''
})
function updateFieldState(e){
const {name , value} = e.target
setNewScoresObject({
...newScoresObject,
[name] : value
})
}
async function onAddScores(e){
e.preventDefault();
// get current Scores object for this teamId
const Scores = Moralis.Object.extend("Scores");
const query = new Moralis.Query(Scores);
query.equalTo("teamId", teamId);
const fetchedScores = await query.first();
// update Scores object
fetchedScores.add('scores', {
football: newScoresObject.football,
rugby: newScoresObject.rugby,
cricket: newScoresObject.cricket,
})
const updatedScores = await fetchedScores.save();
console.log("Updated scores object: ", updatedScores);
}
return (
<div style={{padding: '30px'}}>
<form>
<input onChange={updateFieldState} placeholder="football score" name="football" value={newScoresObject.football} /><br />
<input onChange={updateFieldState} placeholder="rugby score" name="rugby" value={newScoresObject.rugby} /><br />
<input onChange={updateFieldState} placeholder="cricket score" name="cricket" value={newScoresObject.cricket} /><br />
<button onClick={onAddScores}>Add Investment</button>
</form>
</div>
)
}
export async function getServerSideProps(context) {
const teamId = context.query.teamid;
return {
props: {
teamId: teamId
}
};
}
export default Demo;
So I am first fetching a URL parameter which is the teamId. When the page loads there is a form with standard react onChange state handling and a button that when pressed should add a new object with the scores for football, rugby and cricket to the scores array column in the Scores class.
When the button is pressed I am fetching a new Moralis object using the teamId pulled from getServerSideProps and then follow the steps to add that new object to the scores column.
- The first time I save some scores, it successfully saves them as a new object within the array and I can see it in the Moralis dashboard.
- The second time I save some scores it is not added to the Moralis dashboard, but in the object
attributesI log out to the console I can now see the two objects in the array. - The third time I save some scores it is again not added to the dashbaord and the in the object in the console, this 3rd object just replaces the 2nd one.
To further muddy the waters, sometimes the object IS added to the dashboard and sometimes it does not overwrite the last object in the console logged object. I can find no rhyme or reason for when this happens.
Only refreshing the page allows me to correctly add a new one.
I also tried first retrieving the object in useEffect and setting it to state, then calling that state variable in the onAddScores function, and making sureuseEffect re-runs (and therefore fectches the updated object and again saves to state), but get the same result.
Is there something obvious I have overlooked that is creating this problem?
Thanks