+ 1

Why setState not updating State instantly?

setState not updating state immediately which cause the states to hold previous values not leading the correct action which is msg inside a div element on clicking button. I have to click it 2 times to get the desired outcome. Help me out here ....

19th Jan 2023, 11:24 AM
Abhinav Gourav Simhadri
Abhinav Gourav Simhadri - avatar
6 odpowiedzi
+ 3
I think you need to post the code so they can help you..
20th Jan 2023, 1:38 PM
Saif
Saif - avatar
0
Maybe you have a problem in the state constants, Can you give us your code, so that the problem is more clear and we can help you
21st Jan 2023, 11:23 AM
Outmane Moudni
Outmane Moudni - avatar
0
i have got it sorted using async and await but when i run for testcases its failing , if i am using a class component . if the same code is written as functional component , UI is working fine , but when testing upon firing events , the values for the fields which are set in testcase are not getting assigned , which is leading to failure of testcase
26th Jan 2023, 3:04 PM
Abhinav Gourav Simhadri
Abhinav Gourav Simhadri - avatar
0
test('testcase1', async() => { render(<UrlValidator />); const inputDomain = screen.getByTestId('domain'); const inputPath = screen.getByTestId('path'); const inputMethod = screen.getByTestId('method'); const inputBody = screen.getByTestId('body'); const form = screen.getByTestId('submit'); expect(inputDomain).toBeTruthy(); expect(inputPath).toBeTruthy(); expect(inputMethod).toBeTruthy(); expect(inputBody).toBeTruthy(); fireEvent.submit(form, { target : [ {value : 'www.google.com'}, {value : 'search all'}, {value : 'GET'}, {value : ''}, ] }); const message = screen.getByTestId('message'); expect(message.textContent).toBe('www.google.com/search/all'); }); Here is the testcase .
26th Jan 2023, 3:07 PM
Abhinav Gourav Simhadri
Abhinav Gourav Simhadri - avatar
0
Here is my component. import React , {useState} from "react"; function UrlValidator(){ const [domain,setDomain] = useState(""); const [path,setPath] = useState(""); const [method,setMethod] = useState("GET"); const [body,setBody] = useState(""); const [message,setMessage] = useState(""); const [color,setColor] = useState(''); const urlPatternValidation = (Domain) => { const regex = new RegExp('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?'); if(!Domain.includes('com')){ return false; } return regex.test(Domain); }; const handleSubmit = (e)=>{ e.preventDefault(); if(!urlPatternValidation(domain)){ setMessage('Invalid URL!Please recheck your URL'); setColor('red'); } else if(body && path){ setMessage(domain + '/'+ path.split(' ').join('/')); setColor('#4EDD4D'); try{ var obj = JSON.parse(body); var res = message + '?'; for(let key in obj){ res= res+ key+'='+obj[key]; } if(!(method==="POST" || method==='PUT')){ setMessage(res); } } catch(Exception){ setColor('red'); if (method==="POST" || method==='PUT'){ setMessage('Error in the body'); } else{ setMessage('Error in the Body of the Query Params'); } } } else if(path && body===""){ if (method==="POST" || method==='PUT'){ setColor('red'); setMessage('Error in body'); } else{ setMessage(domain+ '/'+ path.split(' ').join('/')); setColor('#4EDD4D'); } } else if(body===""){ if (method==="POST" || method==='PUT'){ setMessage('Error in body'); setColor('red'); } } }
26th Jan 2023, 3:08 PM
Abhinav Gourav Simhadri
Abhinav Gourav Simhadri - avatar
0
I am taking from the input which will be the return statement of the component
26th Jan 2023, 3:10 PM
Abhinav Gourav Simhadri
Abhinav Gourav Simhadri - avatar