Question

通过循环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
  })
})

}

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

Answer 1

根据您提供的JSON格式，它似乎是

let exercise in exercises

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

如果是这种情况，您应该能够直接将练习推送到newState，这样您就可以访问练习对象中的sessions对象。

Answer 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>只是占位符，不用担心。：）

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

2 个答案: