I have a typescript function that receives a 'queryParameter' and then loops over an existing set of queryParameters from a state hook within the component. If it finds a matching parameter name I want it to update the queryParameters object into the const 'newQueryParams'.
note that the issue only occurs with the 'Date' query parameter. All code examples work fine for both other types ('getLatest' and 'fundCode'). Also this is not a question of date object equality
function (only the necessary part):
const handleQueryParameterChange = (queryParameter: DataProductQueryParameter) => {
console.log("existing parameters from state hook: ", queryParameters)
console.log("incoming parameter to function: ", queryParameter)
const newQueryParams = queryParameters.map((param, i) => {
console.log("loop: " + i);
if(queryParameter.name === param.name) {
console.log("match");
param.suggestedValue = queryParameter.suggestedValue;
}
return param;
});
console.log("new query params: ", newQueryParams);
I have logged the various bits to show what happens:
As you can see the incoming parameter tries to change the date to the 21st, but fails, despite a match in the loop.
I have also tried using deep copies:
const deepCopyFunction = (inObject: any) => {
let outObject: any, value, key
if (typeof inObject !== "object" || inObject === null) {
return inObject // Return the value if inObject is not an object
}
// Create an array or object to hold the values
outObject = Array.isArray(inObject) ? [] : {}
for (key in inObject) {
value = inObject[key]
// Recursively (deep) copy for nested objects, including arrays
outObject[key] = deepCopyFunction(value)
}
return outObject
}
const handleQueryParameterChange = (
queryParameter: DataProductQueryParameter
) => {
const queryParametersCopy = deepCopyFunction(queryParameters);
const deepCopyQueryParam = {...queryParameter};
console.log("existing parameters copy: ", queryParametersCopy)
console.log("incoming new parameter: ", queryParameter)
console.log("incoming parameter deep copy: ", deepCopyQueryParam);
const newQueryParams = queryParametersCopy.map((param, i) => {
console.log("loop: " + i);
if(deepCopyQueryParam.name === param.name) {
console.log("match");
param.suggestedValue = deepCopyQueryParam.suggestedValue;
}
return param;
});
console.log("new query params: ", newQueryParams);
which produced the same:
I have also tried just switching out the whole object when i get the match, rather than just editing a property:
const handleQueryParameterChange = (queryParameter: DataProductQueryParameter) => {
console.log("existing parameters: ", queryParameters)
console.log("incoming new parameter: ", queryParameter)
const newQueryParams = queryParameters.map(param => {
return queryParameter.name === param.name ? queryParameter : param;
});
console.log("new query params: ", newQueryParams);
...which didnt work either/ The below screenshot outlines the output, but also note the difference between the headline and expanded object in "incoming new parameter". I've seen this a few times and while stack overflow tells me its the async nature of the console, i can't figure out why its happening in the code.
again please note that the issue only occurs with the 'Date' query parameter. All code examples work fine for both other types ('getLatest' and 'fundCode')
Update
I have implemented one of the suggested improvements, but I'm still not getting the right output.
Here is a little more of the code, including a state hook and an effect hook, with the new implementation:
const [queryParameters, setQueryParameters] = useState<DataProductQueryParameter[]>(dataProductQueryParameters ?? []);
useEffect(() => {
console.log("effect called: ", queryParameters)
}, [queryParameters])
const handleQueryParameterChange = (queryParameter: DataProductQueryParameter) => {
if(queryParameter.name === "getLatest") {
setDatePickerDisabled(!datePickerDisabled);
}
const matchIndex = queryParameters.findIndex(param => queryParameter.name === param.name);
const queryParametersCopy = JSON.parse(JSON.stringify(queryParameters));
if (matchIndex !== -1) {
const suggestedValue = queryParameter.suggestedValue;
queryParametersCopy[matchIndex] = { ...queryParametersCopy[matchIndex], suggestedValue}
}
console.log("new query params: ", queryParametersCopy);
setQueryParameters(queryParametersCopy);
};
The state hook sets successfully on component load. When I invoke the handleChange function, my debugger shows that it updates the new array (newQueryParams) successfully.
The issue arises when setQueryParameters is called to update the state hook. It seems to trigger fine as the useEffect hook gets called. But both my debugger and console show that the suggestedValue field on the updated array doesnt get updated.
Again - this works absolutely fine for the other fields - getLatest and fundCode, so the logic is sound and the hooks are firing for setting new values, but the date one simply won't update.
Thanks
