I am getting this error when fetching data from firebase and pushing the data into an array. Here I define a temp array when I am pushing data inside firebase onValue into this temp array I am getting this error Uncaught TypeError: Cannot add property 0, object is not extensible at Array.push. Here is my code
function Room() {
const [textInput, setTextInput] = useState('');
const temp = [];
const handleTextInputChange = (event) => {
setTextInput(event.target.value);
};
const handleSubmit = () => {
console.log('here goes');
if (textInput !== '') {
const refer = ref(database, 'rooms/');
push(refer, textInput).then(() => {
setTextInput('');
toast.success('Added Successfully!');
});
}
};
useEffect(() => {
const refer = ref(database, 'rooms/');
onValue(refer, (snap) => {
snap.forEach((child) => {
console.log(child.val() child.key);
// I am getting error in this line
temp.push({ id: child.key, firstName: child.val() });
});
});
}, []);
return (
<div>
<Grid item xs={12}>
<SubCard title="Room List">
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={temp}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
components={{
Toolbar: CustomToolbar
}}
/>
</div>
</SubCard>
</Grid>
</div>
)
CodePudding user response:
The error you're getting is what you get when you try to push to a frozen array:
const temp = Object.freeze([]);
temp.push(42);
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
You've shown that you're passing the array to DataGrid
as rows
. Apparently, DataGrid
freezes the array, presumably because it needs to know that the contents of it don't change.
If you want to change those contents, you'll need to store temp
in state and re-render after adding to it; see ***
comments (I've also renamed temp
to dataGridRows
):
function Room() {
const [textInput, setTextInput] = useState('');
// *** Store it in state
const [dataGridRows, setDataGridRows] = useState([]);
const handleTextInputChange = (event) => {
setTextInput(event.target.value);
};
const handleSubmit = () => {
console.log('here goes');
if (textInput !== '') {
const refer = ref(database, 'rooms/');
push(refer, textInput).then(() => {
setTextInput('');
toast.success('Added Successfully!');
});
}
};
useEffect(() => {
const refer = ref(database, 'rooms/');
onValue(refer, (snap) => {
snap.forEach((child) => {
console.log(child.val() child.key);
// *** Add to it in state; this will cause a re-render
// so DataGrid picks up the change
setDataGridRows(dataGridRows => [...dataGridRows, { id: child.key, firstName: child.val() }];
});
});
}, []);
return (
<div>
<Grid item xs={12}>
<SubCard title="Room List">
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={dataGridRows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
components={{
Toolbar: CustomToolbar
}}
/>
</div>
</SubCard>
</Grid>
</div>
)
}