如何通过 Firebase 快照将子数组推送到数组中的项目到本地 React 状态答案

【问题标题】：How to push child arrays into items in an array to local React state, via a Firebase snapshot如何通过 Firebase 快照将子数组推送到数组中的项目到本地 React 状态
【发布时间】：2017-12-08 06:59:43
【问题描述】：

这个小应用程序的状态是通过遍历 Firebase 快照（数组）中的项目来设置的。我不知道如何以这种方式输出嵌套（子）数组。我的直觉说这是一个常规的 JS 函数，我不认为它像 map 并且基于学习状态的语法我感到困惑。在弄清楚如何将 sessions 数组推入每个 exercise 的状态时，我希望得到一些帮助。

Firebase 中数据结构的屏幕截图：[http://i.imgur.com/FlS054T.png]

componentDidMount () {
const exercisesRef = firebase.database().ref('exercises')
exercisesRef.on('value', snapshot => {
  let exercises = snapshot.val()
  let newState = []
  for (let exercise in exercises) {
    newState.push({
      id: exercise,
      title: exercises[exercise].title,
      setting: exercises[exercise].setting,
      settingType: exercises[exercise].settingType,
      reps: exercises[exercise].reps,
      raiseAfter: exercises[exercise].raiseAfter,
      raiseBy: exercises[exercise].raiseBy
    })
  }
  this.setState({
    exercises: newState
  })
})

}

提前感谢您提供的任何帮助！

【问题讨论】：

标签： reactjs firebase firebase-realtime-database state

【解决方案1】：

根据您提供的 JSON 格式，看起来像

let exercise in exercises

将每个练习作为一个对象提供给您。

如果是这种情况，您应该可以直接将锻炼推送到 newState，这样您就可以访问锻炼对象中的会话对象。

【讨论】：

这有帮助吗？
这确实有道理，它让我更接近了。我正在阅读有关如何将对象文字推送到数组中的其他帖子。
exercises 作为对象返回，exercise 中的 let exercise in exercises 仅返回 Firebase 为每个 exercise 生成的 UID，所以我正在进一步挖掘。
我将此标记为正确答案，因为它为我提供了正确的处理方法。

【解决方案2】：

如果其他人遇到这个问题，@Claysmile 是对的。将整个对象推入状态，似乎使用 Lodash 的 map 函数是输出数据的最佳选择。

exercisesRef.on("value", snapshot => {
  this.setState({ exercises: snapshot.val() });
});

为了输出数据，在这个具体的例子中我使用的是：

<ul>
  {sessions &&
    map(sessions, (session, key) =>
      <li key={key}>
        <p>
          {session.completed}
        </p>
        <p>
          {session.completedDate}
        </p>
        <p>
          {session.setting}
        </p>
      </li>
    )}
  </ul>

对于我的前端同事，<p>s 只是占位符，不用担心。 :)

【讨论】：