Reactjs 使用orderByChild后，如何处理列表？

我正在开发一个应用程序，用户可以在其中发表帖子，然后投票表决。我希望能够从firebase请求帖子列表，并按票数排序。我该怎么做

我的数据结构如下：

export const fetchPostsByHottest = () => {
  return (dispatch) => {
    firebase.database().ref('/social/posts')
      .orderByChild('vote_count')
      .on('value', snapshot => {
        const nodes = [];
        snapshot.forEach(child => nodes.push(child.val()));

        console.log(nodes);
        dispatch({ type: HOT_POSTS_FETCH_SUCCESS, payload: nodes });
      });
  };
};

我正试图启动此操作：

export const fetchPostsByHottest = () => {
  return (dispatch) => {
    firebase.database().ref('/social/posts')
      .orderByChild('vote_count')
      .on('value', snapshot => {
        dispatch({ type: HOT_POSTS_FETCH_SUCCESS, payload: snapshot.val() });
      });
  };
};

只要按一下键，它就会恢复正常的顺序

我被告知snapshot.val（）会将快照转换为常规JS对象并终止任何订单

这是我的减速机：

import {
  HOT_POSTS_FETCH_SUCCESS,
} from '../actions/FeedActions/types';

const INITIAL_STATE = {
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case HOT_POSTS_FETCH_SUCCESS:
      return action.payload;
    default:
      return state;
  }
};

然后我尝试将状态映射到我的

feed

组件中的道具：

const mapStateToProps = state => {
  const posts = _.map(state.hotFeed, (val, uid) => {
    return { ...val, uid };
  });

  return { posts: posts.reverse() };
};

我这样做是因为我需要从每个post对象获取值和UID

如果我尝试在如下操作中将其转换为数组：

export const fetchPostsByHottest = () => {
  return (dispatch) => {
    firebase.database().ref('/social/posts')
      .orderByChild('vote_count')
      .on('value', snapshot => {
        const nodes = [];
        snapshot.forEach(child => nodes.push(child.val()));

        console.log(nodes);
        dispatch({ type: HOT_POSTS_FETCH_SUCCESS, payload: nodes });
      });
  };
};

然后它只会给我带回一个帖子，也不会给我UID

我怎样才能解决这个问题

谢谢大家!

---

Matt

上一个代码片段中的查询应该是正确的。没有理由只返回一个帖子。但是，快照可能短路：

回调可以返回true以取消进一步的枚举

push

返回新的长度，

forEach

可能正在测试任何真实值，而不仅仅是

true

，并且正在取消进一步的枚举。使用块确保返回

未定义的

此外，您还可以使用子级的

密钥

属性获取密钥

firebase.database().ref('/social/posts')
  .orderByChild('vote_count')
  .once('value', snapshot => {

    const nodes = [];
    snapshot.forEach(child => { nodes.push({ ...child.val(), key: child.key }); });

    console.log(nodes);
    dispatch({ type: HOT_POSTS_FETCH_SUCCESS, payload: nodes });
  });

---

另外，对于您的用例，

once

似乎比

on

更合适，因为UID是键，所以您无法获得UID。可以使用snapshot.key访问它。请阅读forEach的文档，谢谢您的回答。我需要使用一次，因为我希望饲料观看帖子和自动更新。我有和你一样的代码，它肯定只返回一个帖子！使用块来确保返回未定义的是什么意思？为什么会这样呢？这里的块是大括号：

child=>{nodes.push（…）；}

。没有它们，

push

的返回值由arrow函数返回-这可能会取消进一步的枚举（如答案中所述）。哦，太棒了，我错过了，谢谢！你能解释一下这是怎么回事吗？为什么它会返回未定义的内容？这些积木有什么帮助？为什么呢？这只是箭头函数语法，仅此而已

（x）=>x+1

相当于

（x）=>{return x+1；}

，因此

（x）=>y.push（x）

相当于

（x）=>{return y.push（x）；}

。因此，为了避免返回值，需要显式块

（x）=>{y.push（x）；}

。这只是因为

forEach

正在检查返回值。