解析数据从Firebase在反应渲染

Question

我想解析数据，我收到的组件加载渲染。

我有这样一种状态：

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>
                        )

                    })}

问题是，尽管我的数据处于状态，但它并没有在render中进行解析。你知道怎么了吗？

我还有一个错误：索引。js:1警告：列表中的每个孩子都应该有一个唯一的“键”道具。

我的数据是错误的：控制台。日志：

Array(1)
0:
-M7Y4RJMl1pd4ynwXPYJ: {img: "https://", user: "josh", userid: "T87u4DL82IaGO9X"}
-M7Y4RJMl1pdwXPYJ: {img: "https://", user: "josh2", userid: "T87u82IaGO9X"}
-M7Y4RXPYJ: {img: "https://", user: "josh3", userid: "T87u4DL82GO9X"}
-M7Y4RJMl1XPYJ: {img: "https://", user: "josh4", userid: "T87uaGO9X"}
img: undefined
key: "posts"
user: undefined

Answer 1

检查文件https://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html您需要将对象转换为数组，渲染中的贴图函数需要数组，但您使用的是对象

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