时间戳

首页 > 解决方案 > 如何在引导轮播中检索 Firebase 数据

reactjs - 如何在引导轮播中检索 Firebase 数据

问题描述

我有一个 firebase 表，我想在引导轮播中使用 reactjs 将这些数据与 3 张卡片放在幻灯片中以下是我的表结构。

雇主1
     工作1
       标题
       描述
       速度
     工作2
       标题
       描述
       速度

标签： reactjs

解决方案

我建议这样的模式：JobList组件只负责显示通过道具获取的列表。它的容器负责服务器连接。它也可以更改为 redux 容器以防万一。firebase 连接是一个订阅，只要它们在数据库上发生更改，它就会更新作业。

JobList.js 

class JobList extends React.Component {
  render() {
    const { jobs } = this.props;

    return (
      <ul>      
        {jobs.map(({title, description, rate}) => (
          <li>
            <span>{title}</span>
            <span>{description}</span>
            <span>{rate}</span>
          </li>
        ))}
      </ul>
    )
  }
}

JobListContainer.js 

class JobListContainer extends React.Component {
  state = {
    jobs: []
  }

  componentDidMount(){
    firebase.database().ref('/jobs')
    .on('value', this.updateJobs)
  }

  updateJobs = data => {
    if (data.val()) {
      this.setState({ jobs: data.val() })
    }  
  }

  render(){
    const { jobs } = this.state;
    return (<JobList jobs={jobs} />
  }

}

推荐阅读