I am running into an issue in my React app with the handleSubmit
function as explained below.
Brief overview:
In order to handle employeeSets
and projects
for the axios put, I have to put certain arrays related checks as shown below. In a scenario when both employee and project are an array, my control reaches the first if block where I have the console.log saying –
INSIDE if block since both employeeSets and projects are an array.
I am noticing that sometimes, values.employeeSets[0].employeeSetId
is undefined
and hence handleSubmit
doesn’t work. Basically, it doesn’t let users to submit anything. How can I fix it? I would probably want to pass a null value if it’s undefined.
Also, can there be any improvement in the array related checks that I have made in the code?
handleSubmit = (values) => { console.log("Array testing for employeeSets and Protocols"); console.log("Is Employee an array?"); console.log(Array.isArray(values.employeeSets)); console.log("Is Project an array?"); console.log(Array.isArray(values.protocols)); if (values.requestId && values.requestId > 0) { if(Array.isArray(values.employeeSets) && Array.isArray(values.projects)){ console.log("INSIDE if block since both employeeSets and projects are an array"); axios.put(`upms/saveData`, { requestId: values.requestId, projectId: values.projectId, employeeSets: deriveEmployeeArray(values.employeeSets[0].employeeSetId), projects: deriveProjectArray(values.projects[0].projectId), }).then((response) => { console.log('response', response) this.setState({ dataRequestFormVisible: false, dataRequestGridVisible: true, dataRequestFormSection: true, selectedDataRequest: [] }, () => { this.growl.show({severity: 'success', summary: 'Save Successful', detail: 'Data Request Saved'}) }) this.fetchRecords() }).catch((err) => console.log(err)); } else if(!Array.isArray(values.employeeSets) && Array.isArray(values.projects)){ console.log("projects => ARRAY and EmployeeSet => Not and array") axios.put(`upms/saveData`, { requestId: values.requestId, projectId: values.projectId, employeeSets: deriveEmployeeArray(values.employeeSets), projects: deriveProjectArray(values.projects[0].projectId), }).then((response) => { console.log('response', response) this.setState({ dataRequestFormVisible: false, dataRequestGridVisible: true, dataRequestFormSection: true, selectedDataRequest: [] }, () => { this.growl.show({severity: 'success', summary: 'Save Successful', detail: 'Data Request Saved'}) }) this.fetchRecords() }).catch((err) => console.log(err)); }//End of else if else if(Array.isArray(values.employeeSets) && !Array.isArray(values.projects)){ console.log("EmployeeSets => ARRAY and projects => Not and array") axios.put(`upms/saveData`, { requestId: values.requestId, projectId: values.projectId, employeeSets: deriveEmployeeArray(values.employeeSets[0].employeeSetId), projects: deriveProjectArray(values.projects), }).then((response) => { console.log('response', response) this.setState({ dataRequestFormVisible: false, dataRequestGridVisible: true, dataRequestFormSection: true, selectedDataRequest: [] }, () => { this.growl.show({severity: 'success', summary: 'Save Successful', detail: 'Data Request Saved'}) }) this.fetchRecords() }).catch((err) => console.log(err)); }// End of else if else{ console.log("INSIDE ELSE block since both are not an array"); axios.put(`upms/saveData`, { requestId: values.requestId, projectId: values.projectId, employeeSets: deriveEmployeeArray(values.employeeSets), projects: deriveProjectArray(values.projects), }).then((response) => { console.log('response', response) this.setState({ dataRequestFormVisible: false, dataRequestGridVisible: true, dataRequestFormSection: true, selectedDataRequest: [] }, () => { this.growl.show({severity: 'success', summary: 'Save Successful', detail: 'Data Request Saved'}) }) this.fetchRecords() }).catch((err) => console.log(err)); } // End of else } } function deriveEmployeeArray(employee) { if(employee.length == 0){ return "" } else{ return [employee] ; } } function deriveProjectArray(project) { if(project.length == 0){ return "" }else { return [project]; } }
Advertisement
Answer
Looking at your post parameters.
requestId: values.requestId, projectId: values.projectId, employeeSets: deriveEmployeeArray(values.employeeSets[0].employeeSetId), projects: deriveProjectArray(values.projects[0].projectId),
There are 3 recommendations.
1 Don’t use array, use plain object. e.g.
value = { requestId: 123, projectId: 123. employeeSets: 1234, projects: 'some project' }
2 If you really need to use array, then just check the ID directly.
if (values.employeeSets[0].employeeSetId) { ... do something }
3 If you want to return either the array or alternatively null, you can also do something like this.
requestId: values.requestId, projectId: values.projectId, employeeSets: deriveEmployeeArray(values.employeeSets[0]?.employeeSetId) || null, projects: deriveProjectArray(values.projects[0]?.projectId) || null,
Ideally, all these If-Else statements should not be necessary in onSubmit function, and should be checked/defined within deriveEmployeeArray and deriveProjectArray (cleaner codes).
function deriveEmployeeArray(employee) { return Array.isArray(employee) ? employee : '' // if not array, then just return empty string. // If employee could be a string OR an array OR empty, u can also do // return employee || '' }