I have this code which calls an ajx request and set an error if returned 2. It is returning 2; but no error messages showing up and gets to next page (as if it is a success)
isCodeExists(userInput).then(res => { console.log(res); if (res == 2) console.log("it is 2!!"); // Any other logic that needs the value of `res` should come here... setErrorMessage('Paper Form ID must begin with "HBCD".'); setHasError(true); return false;});The console says: react_devtools_backend.js:4026 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions, and asynchronous tasks in a useEffect cleanup function.At PaperFormPage
The full PaperForm Page Code
import React, { useState, useEffect } from 'react';import TextboxScannerElement from './TextboxScannerElement';export default function PaperFormPage(props) { const [pageUserInput, setPageUserInput] = useState([]); const [hasError, setHasError] = useState(false); const [errorMessage, setErrorMessage] = useState(''); useEffect(() => { if (props.pageData !== undefined) { setPageUserInput([...props.pageData]); } }, [props.pageData]); // element = TextboxElement name function onUserInput(element, value) { setErrorMessage(''); setHasError(false); if (typeof element === 'string') { let pageUserInputCopy = [...pageUserInput]; let index = pageUserInputCopy.findIndex((obj) => obj.key === element); let itemCopy = { ...pageUserInputCopy[index] }; itemCopy['userInput'] = value; pageUserInputCopy[index] = itemCopy; setPageUserInput(pageUserInputCopy); } } function isCodeExists(userInput) { setErrorMessage(''); setHasError(false); let code = encodeURIComponent(userInput); const testURL = loris.BaseURL +'/biosample/ajax/validateScannableCode.php'+'?scannable_code='+ code; return fetch( testURL, { credentials: 'include', method: 'GET', headers: {'Accept': 'application/json','Content-Type': 'application/json', }, }) .then((response) => response.json()) .then((responseData) => { if(responseData==2) { return 2; } else{ return 1; } }) .catch(error => console.warn(error));; } function isValid(userInput) { if (!/^[a-zA-Z0-9]+$/.test(userInput)) { setErrorMessage('Cannot contain non-alphanumeric characters.'); setHasError(true); return false; } if (!/^.{10,}$/.test(userInput)) { setErrorMessage('Must be at least 10 characters in length.'); setHasError(true); return false; } if (!userInput.startsWith('HBCD')) { setErrorMessage('Paper Form ID must begin with "HBCD".'); setHasError(true); return false; } isCodeExists(userInput).then(res => { console.log(res); if (res == 2) console.log("it is 2!!"); // Any other logic that needs the value of `res` should come here... setErrorMessage('Paper Form ID must begin with "HBCD".'); setHasError(true); return false; }); return true; } function handleSubmit(e) { if (isValid(pageUserInput[0].userInput)) { props.updatePageData(pageUserInput); props.nextStep(); } } const form = pageUserInput.length === 0 ? null : (<TextboxScannerElement keyStr={pageUserInput[0].key} label={pageUserInput[0].label} name={pageUserInput[0].key} onUserInput={onUserInput} value={pageUserInput[0].userInput} errorMessage={errorMessage} /> ); return (<><div className="instructions"><strong>Instructions:</strong><p>Scan the Paper Form found in the kit.</p></div><FormElement className="FormElement" name="form" fileUpload={false} onSubmit={handleSubmit} onUserInput={onUserInput}> {form}<ButtonElement label="Next" onUserInput={onUserInput} /></FormElement></> );}