gpt4 book ai didi

javascript - getElementByID + .appendhild() [类型错误 : Failed to execute 'appendChild' on 'Node' : parameter 1 is not of type 'Node' . ]

转载 作者:行者123 更新时间:2023-12-02 21:47:40 26 4
gpt4 key购买 nike

我有一个名为“Article”的自定义组件,我试图通过从数据库中获取所有文章并将它们呈现为“Article”组件来显示所有文章。

function renderArticle(doc){
var article = '<Article name="' + doc.data().name + '" content="' + doc.data().content + '" id="' + doc.data().id + '"/>'
document.getElementById('articles-list').appendChild(article)

}

const db = firebase.firestore()
db.collection('articles').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
renderArticle(doc)
})
})

当我运行它时,控制台返回TypeError:无法在“Node”上执行“appendChild”:参数1不是“Node”类型。

我被困住了...

最佳答案

AS @Calvin Nunes 说你需要将 Node 传递给 document.createElement(),但是当你标记了 ReactJS 时,也许你也可以使用一些关于它的建议。

在 React 中,我们渲染异步数据(例如,从数据库获取的文档)的方式是将它们跟踪到组件状态。

首先,我们渲染 null 或某些加载指示器并触发请求以获取数据。加载数据后,我们设置状态,因此我们的组件将重新渲染,我们可以渲染状态中的内容。

如果您使用具有生命周期的组件,您的代码将如下所示:

import React, {Component} from 'react';

class ArticleList extends Component {
constructor(props) {
super(props);
this.state = {
docs: null,
};
}

componentDidMount() {
db.collection('articles').get().then((snapshot) => {
this.setState({docs: snapshot.docs});
})
}

render() {
if (docs === null) return null;
return (
<div>
{docs.map((doc) => {
return (
<Article
content={doc.data().content}
key={doc.data().id}
id={doc.data().id}
name={doc.data().name}
/>
);
})}
</div>
);
}
}

export default ArticleList;

如果您使用带有钩子(Hook)的函数,您的代码将如下所示:

import React, {useEffect, useState} from 'react';
import Article from './Article'; // your other component

function ArticleList () {
const [docs, setDocs] = useState(null);
const db = firebase.firestore();
useEffect(() => {
db.collection('articles').get().then((snapshot) => {
setDocs(snapshot.docs);
})
}, [db, setDocs]);
if (docs === null) return null;
return (
<div>
{docs.map((doc) => {
return (
<Article
content={doc.data().content}
key={doc.data().id}
id={doc.data().id}
name={doc.data().name}
/>
);
})}
</div>
);
}

export default ArticleList;

您可能还需要记住 db 对象,以便仅运行一次 useEffect Hook ,但这不是重点。

关于javascript - getElementByID + .appendhild() [类型错误 : Failed to execute 'appendChild' on 'Node' : parameter 1 is not of type 'Node' . ],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60216450/

26 4 0