[英]Uncaught TypeError: Cannot add property 0, object is not extensible at Array.push
I am getting this error when fetching data from firebase and pushing the data into an array.从 firebase 获取数据并将数据推入数组时出现此错误。 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.
在这里我定义了一个临时数组,当我将 firebase onValue 中的数据推送到这个临时数组时,我收到了这个错误 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>
)
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);
You've shown that you're passing the array to DataGrid
as rows
.您已经证明您将数组作为
rows
传递给DataGrid
。 Apparently, DataGrid
freezes the array, presumably because it needs to know that the contents of it don't change.显然,
DataGrid
冻结了数组,大概是因为它需要知道它的内容不会改变。
If you want to change those contents, you'll need to store temp
in state and re-render after adding to it;如果要更改这些内容,则需要将
temp
存储在 state 中并在添加后重新渲染; see ***
comments (I've also renamed temp
to dataGridRows
):请参阅
***
评论(我还将temp
重命名为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>
)
}
Thanks for the answer TJ Crowder, it helped me to understand that the real problem is not the object that you are going to pass the value, but the original object, because it is passed by reference.感谢 TJ Crowder 的回答,它帮助我理解了真正的问题不是你要传递值的 object,而是原来的 object,因为它是通过引用传递的。
So, when you have the error所以,当你有错误时
object is not extensible at array
The solution is to copy the values of the original object to the target, not just assign them with the equals (=) operator.解决方案是将原始 object 的值复制到目标,而不仅仅是用等号 (=) 运算符赋值。
for example例如
targetObject.nodes.map( (newNode: any) => {
//here I create a new object and enrich it with an array and a boolean
let newFullNode = Object.assign({}, newNode, {nodes: [] , hasChildren:true});
targetObject.nodes.push(newFullNode);
});
I update the targetObject later on, and when I was updating it, only then I was getting the error, which was misleading me.我稍后更新了 targetObject,当我更新它时,才收到错误,这误导了我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.