Javascript 在react render中解析firebase中的数据

我想解析从componentdidmount接收到的数据以进行渲染

我有这样一种状态：

constructor(props) {
    super(props);
    this.state = {
        loading: true,
        data: []
    }
}

这个组件安装在：

componentDidMount() {

    var post = [];

    var feedRef = firebase.database().ref().child('posts').limitToLast(10);
    feedRef.once('value', async (snapshot) => {

        post.push(
            Object.assign(snapshot.val(), {
                key: snapshot.key,
                user: snapshot.user,
                img: snapshot.img
            })
        )

        this.setState({ data: post, loading: false });

        console.log(this.state.data); // has the data

    });
}

下面是解析数据的步骤：

{this.state.data.map(post => {

                        return(
                            <div>
                                <img src={post.img} />
                            </div>
                        )

                    })}

检查文件 您需要将对象转换为数组，渲染中的贴图函数需要数组，但您使用的是对象

var obj = snapshot.val();
var arrayPosts = Object.keys(obj).map(function(key) {
  return {
    key,
    user: obj[key].user,
    img: obj[key].img
 }
});
post = arrayPosts

---

对于关键问题，这意味着您必须为每个元素添加唯一的关键道具。例如，

。对于原始版本culd，您提供了此版本的代码沙盒？@radulle我使用获得的数组编辑我的问题。我认为这是错误的。。。也许是我推阵列的时候做错了什么。。。

var obj = snapshot.val();
var arrayPosts = Object.keys(obj).map(function(key) {
  return {
    key,
    user: obj[key].user,
    img: obj[key].img
 }
});
post = arrayPosts