React page won't load when fatch data function has 3 items - reactjs

Question

I have this detail page when the detail button is clicked it goes to the detail page. However, sometimes the page won't load. The fatchData function has 3 items and each one calls the webapi to get different dataset. If I remove any of 2 in fatchData function and only leave one in it and it will load fine. However, the rest of the data will be missing and I need it in the page. How do I solve it? I think it has something to do with the useEffect hook that causes the stackover flow.
Here is the error it always hit: throw Error( "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops." );
Here is the entire page code:
import React, { useEffect, useState } from 'react';
import 'dotenv/config';
import Button from '#mui/material/Button';
import MenuItem from '#mui/material/MenuItem';
import Select from '#mui/material/Select';
import ClearIcon from '#mui/icons-material/Clear';
import ListItem from '#mui/material/ListItem';
import ListItemIcon from '#mui/material/ListItemIcon';
import ListItemButton from '#mui/material/ListItemButton';
import ListItemText from '#mui/material/ListItemText';
import List from '#mui/material/List';
import { useParams } from 'react-router-dom'
// Fields
import TextField from '#mui/material/TextField';
// Table
import scriptResultTableColumns from './../table/ScriptGroupResultTable';
import TableComponent from './../table/TableComponent';
import { InputLabel } from '#mui/material';
import FormControl from '#mui/material/FormControl';
function ScriptGroupResultsTable(props) {
const columns = scriptResultTableColumns();
return (<TableComponent columns={columns} url={`${process.env.REACT_APP_API_URL}/api/script-
group-result/script-group-results-by-group-id?id=` + props.groupid} buttonVisible={false}
tableType={'script-group-detail'} />);
}
export default function ScriptDetailsPage(props) {
const [validationError] = useState(null);
const [item, setItem] = useState([]);
const [scriptList, setScriptList] = useState({ items:[] });
const [selectedScript, setSelectedScript] = useState('');
const [selectedScripts, setSelectedScripts] = useState([]);
let { id } = useParams();
const [scriptDetailId] = useState(id);
const [url, setUrl] = useState(`${process.env.REACT_APP_API_URL}/api/script-group/script-group?id=` + scriptDetailId);
function fetchData() {
const fetchItem =fetch(url).then(response => response.json()).then(json => {
setItem(json);
},
(error) => {
console.log(error);
});
const fetchScriptList = fetch(`${process.env.REACT_APP_API_URL}/api/script/scripts`).then(response => response.json()).then(json => {
setScriptList(json);
},
(error) => {
console.log(error);
});
const fetchSelectedScripts = fetch(`${process.env.REACT_APP_API_URL}/api/script-group-member/script-group-members-by-group-id?id=` + scriptDetailId).then(groupResponse => groupResponse.json()).then(groupJson => {
groupJson = groupJson.map((member, i) => ({ ...member, index: i }));
setSelectedScripts(groupJson);
},
(groupError) => {
console.log(groupError);
setSelectedScripts([]);
});
Promise.all([fetchItem, fetchScriptList, fetchSelectedScripts]);
}
function onCancel(e) {
fetchData();
}
function onSubmit(e) {
const requestOptions = {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(item)
};
var scriptList = [];
for (var i = 0; i < selectedScripts.length; i++) {
scriptList.push(selectedScripts[i].scriptId);
}
const updateMembersOptions = {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(scriptList)
}
fetch(`${process.env.REACT_APP_API_URL}/api/script-group?id=` + scriptDetailId, requestOptions).then(
fetch(`${process.env.REACT_APP_API_URL}/api/script-group/replace-group-scripts?id=` + scriptDetailId, updateMembersOptions)
).then(setUrl(url));
}
function getMaxIndex() {
return Math.max.apply(Math, selectedScripts.map(function (o) { return o.index })) + 1;
}
const handleScriptChange = (event) => {
const {
target: { value },
} = event;
var newScriptVal = { ...value, index: getMaxIndex() };
setSelectedScripts([...selectedScripts, newScriptVal])
setSelectedScript('');
};
function removeScript(e) {
if (e.currentTarget.id) {
var index = parseInt(e.currentTarget.id);
setSelectedScripts(selectedScripts.filter((s) => s.index !== index));
}
}
function getBoolStringVal(value) {
if (value)
return "Yes";
else
return "No";
}
useEffect(fetchData, [url, scriptDetailId]);
return (
<div style={{ marginLeft: '10%', maxWidth: '80%' }}>
<TextField
id="groupName"
label="Group Name"
error={validationError}
margin="normal"
fullWidth
value={item.groupName || ''}
onChange={e => setItem({ ...item, groupName: e.target.value })}
/>
<br />
<TextField
aria-readonly
id="groupState"
label="State"
fullWidth
error={validationError}
margin="normal"
value={item.currentStateDescription || ''}
/>
<br />
<TextField
aria-readonly
id="continueOnFailure"
label="Continues on Failure"
error={validationError}
margin="normal"
value={getBoolStringVal(item.continueOnFailure) || ''}
/>
<br />
<FormControl margin="normal">
<InputLabel id="script-select-label" >Add Script</InputLabel>
<Select
labelId="script-select-label"
label="Add Script"
value={selectedScript}
onChange={handleScriptChange}
style={{ width: '350px' }}
>
{
scriptList.items.map((script) => (
<MenuItem
key={script.scriptId}
value={script}
>
{script.scriptName}
</MenuItem>
))}
</Select>
</FormControl>
<br />
<h4>Current Scripts:</h4>
<List dense style={{ width: '300px' }}>
{selectedScripts.map((script) => (
<ListItem key={script.index}>
<ListItemButton>
<ListItemIcon>
<ClearIcon id={script.index} onClick={removeScript} />
</ListItemIcon>
<ListItemText primary={script.scriptName} />
</ListItemButton>
</ListItem>
))}
</List>
<Button variant='outlined' aria-label='Update' style={{ margin: 10, float: 'right' }} onClick={onSubmit}>Update</Button>
<Button variant='outlined' aria-label='Cancel' style={{ margin: 10, float: 'right' }} onClick={onCancel}>Cancel</Button>
<ScriptGroupResultsTable style={{ marginTop: '100px' }} groupid={scriptDetailId} />
</div>
);
}