How to eval before passing params in GET fetch call?
Answered
Greenish Elaenia posted this in #help-forum
Greenish ElaeniaOP
const newCount = globalCount + 1;
const resp = await fetch(
if (resp.status == 200 && resp.statusText == "OK") {
const json = await resp.json();
console.log("fetch returned counters: ", json.result.rows);
console.log("update ui to display new global count:", json.result.rows[0].count);
setGlobalCount(json.result.rows[0].count);
} else {
console.error(resp.status, resp.statusText)
}
the &count= is receiving "2" + "1" and updating "21", not "3".
How do I make newCount increment before updating the result?
const resp = await fetch(
${base_url}/api/counters/update-counter?app=mantraapp&name=${name}&count=${newCount}, { cache: 'no-store' })if (resp.status == 200 && resp.statusText == "OK") {
const json = await resp.json();
console.log("fetch returned counters: ", json.result.rows);
console.log("update ui to display new global count:", json.result.rows[0].count);
setGlobalCount(json.result.rows[0].count);
} else {
console.error(resp.status, resp.statusText)
}
the &count= is receiving "2" + "1" and updating "21", not "3".
How do I make newCount increment before updating the result?
Answered by joulev
If you console.log(globalCount) before that addition, I believe you will get a string. You need to see where and why it became a string
21 Replies
@Greenish Elaenia const newCount = globalCount + 1;
const resp = await fetch(`${base_url}/api/counters/update-counter?app=mantraapp&name=${name}&count=${newCount}`, { cache: 'no-store' })
if (resp.status == 200 && resp.statusText == "OK") {
const json = await resp.json();
console.log("fetch returned counters: ", json.result.rows);
console.log("update ui to display new global count:", json.result.rows[0].count);
setGlobalCount(json.result.rows[0].count);
} else {
console.error(resp.status, resp.statusText)
}
the &count= is receiving "2" + "1" and updating "21", not "3".
How do I make newCount increment before updating the result?
Where did you get globalCount from? It seems it’s currently a string
You can always do Number(globalCount) + 1 but that doesn’t solve the root of the problem, you need to ensure globalCount is a number at all time
Greenish ElaeniaOP
Hi! Thanks for responding
globalCount : number is a prop passed down by a parent Component. The parent component defines it as a useState<number>(0)
globalCount : number is a prop passed down by a parent Component. The parent component defines it as a useState<number>(0)
If you console.log(globalCount) before that addition, I believe you will get a string. You need to see where and why it became a string
Answer
Greenish ElaeniaOP
Ok thank you, gonna go check
Greenish ElaeniaOP
I did console.log(typeof globalCount) right before the await fetch
const resp = await fetch(${base_url}/api/counters/update-counter?app=mantraapp&name=${name}&count=${newCount}, { cache: 'no-store' })
and it printed number
const resp = await fetch(${base_url}/api/counters/update-counter?app=mantraapp&name=${name}&count=${newCount}, { cache: 'no-store' })
and it printed number
I also tried calling the useState's setter function, changing globalCounter, then passing globalCounter to await fetch and it still did string concat instead of incrementing the number
setGlobalCount(globalCount + 1);
const resp = await fetch(
if count was 10, the new amount is 101, not 11.
my hunch is this is to prevent SQL injections - but not sure how to fix it
const resp = await fetch(
${base_url}/api/counters/update-counter?app=mantraapp&name=${name}&count=${globalCount}, { cache: 'no-store' })if count was 10, the new amount is 101, not 11.
my hunch is this is to prevent SQL injections - but not sure how to fix it
No there are no sql protections or anything here. Just your addition being a string concatenation instead of an actual numeric addition. Can you make a minimal reproduction?
Greenish ElaeniaOP
No problem let me get the link
redacted
Click the "第五會“ second-row, right-most brown button
The Mantra will play for ~15 seconds
The Mantra will play for ~15 seconds
At the end, it should increment the Global count (the number at the very bottom)
oh, hang on, theres deployment issues..
I meant the code
So I can look at the entire lifetime of the globalCount state and see how it can possibly fail to be a number
Greenish ElaeniaOP
could it be setting to string from here? setGlobalCount(json.result.rows[0].count);
const [globalCount, setGlobalCount] = useState<number>(0);
useEffect(() => {
(async () => {
const path = String(sfxPath);
const mantra = path.substring(path.lastIndexOf("/")+1, path.indexOf("."));
const resp = await fetch(
if (resp.status == 200 && resp.statusText == "OK") {
const json = await resp.json();
console.log("fetch returned counters: ", json.counters.rows)
setGlobalCount(json.counters.rows[0].count);
} else {
console.error(resp.status, resp.statusText)
}
})();
}, []);
const [globalCount, setGlobalCount] = useState<number>(0);
useEffect(() => {
(async () => {
const path = String(sfxPath);
const mantra = path.substring(path.lastIndexOf("/")+1, path.indexOf("."));
const resp = await fetch(
${window.location.origin}/api/counters/read-counter?app=mantraapp&name=${mantra}, { cache: 'no-store' })if (resp.status == 200 && resp.statusText == "OK") {
const json = await resp.json();
console.log("fetch returned counters: ", json.counters.rows)
setGlobalCount(json.counters.rows[0].count);
} else {
console.error(resp.status, resp.statusText)
}
})();
}, []);
before incrementing, it fetches globalCount's value from a GET request and sets the returned SELECT row's column Count as globalCount's value
row Count is varchar(255)
Greenish ElaeniaOP
Hi Joulev, it indeed is the JSON overwritting the type. Thanks for helping me figure this out, you the best 
No worries, have fun coding