在反应渲染中解析来自firebase的数据答案

【问题标题】：parse data from firebase in react render在反应渲染中解析来自firebase的数据
【发布时间】：2020-09-05 14:29:54
【问题描述】：

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

我有这个状态：

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

而这个组件didmount：

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

                    })}

问题是，虽然我有状态数据，但它没有在渲染中被解析。有什么想法有什么问题吗？

我也有这个错误：index.js:1 警告：列表中的每个孩子都应该有一个唯一的“key”属性。

我的数据有误：控制台日志：

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

【问题讨论】：

对于关键问题，这意味着您必须为每个元素添加唯一的关键道具。例如。 <div key={postUniqueKey}>。对于原始问题，您提供了一个 CodeSandbox 吗？
@radulle 我用我得到的数组编辑我的问题。我认为这是错误的......也许我做错了什么来推动数组......

标签： javascript reactjs

【解决方案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

【讨论】：