我正在尝试渲染组件,但它没有渲染。 我正在使用 Objectkey 循环遍历 firebase 实时数据库 它在控制台中显示数据,但未渲染组件 帮助我度过难关。
它还显示一些警告。
警告:函数作为 React 子项无效。如果您返回一个组件而不是从渲染中返回,则可能会发生这种情况。或者也许您打算调用此函数而不是返回它。
class UserPost extends React.Component {
render() {
return (
<div className="userpost">
{firebase
.database()
.ref()
.child("post")
.on("value", snapshot => {
Object.keys(snapshot.val()).map((item, i) => (
<Post
key={i}
title={snapshot.val()[item].title}
username="Edward"
image={snapshot.val()[item].post_img}
comment={
Object.getOwnPropertyNames(
data.comments[snapshot.val()[item].comments]
).length
}
likes={
snapshot.val()[item].likes
? data.likes[snapshot.val()[item].likes].length
: null
}
/>
));
})}
</div>
);
}
最佳答案
不建议使用 render
方法进行订阅。对于此类代码,更喜欢使用 React 生命周期方法(例如 componentDidMount
):
class UserPost extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: {}
}
}
componentDidMount() {
firebase
.database()
.ref()
.child("post")
.on("value", snapshot => {
this.setState({ posts : snapshot.val()})
})
}
render() {
return (
<div className="userpost">
{Object.keys(this.state.posts).map((item, i) => (
<Post
key={i}
title={this.state.posts[item].title}
username="Edward"
image={this.state.posts[item].post_img}
comment={
Object.getOwnPropertyNames(
data.comments[this.state.posts[item].comments]
).length
}
likes={
this.state.posts[item].likes
? data.likes[this.state.posts[item].likes].length
: null
}
/>
))}
</div>
);
}
}
关于javascript - 对象键不使用 firebase 数据库渲染 React 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58048165/