代码之家 › 专栏 › 技术社区 › StackUnderFlow

如何在react中查询firebase数据库?

firebase-realtime-database firebase reactjs javascript

StackUnderFlow · 技术社区 · 6 年前

我在firebase中有以下数据结构作为实时数据库:

{
  "react" : {
    "url_01" : "https://stackoverflow.com/",
    "url_02" : "https://google.com/",
    "url_03" : "https://www.youtube.com/"
  }
}

我正试图查询数据库以显示下面组件中的所有url。

到目前为止,我已经让它正确地显示了数据库中的第一个URL,但现在尝试将它们全部显示在div中 <h1> 是的。

class FirebaseDB extends React.Component {
  constructor() {
    super();
    this.state = {
      speed: [],
    };
  }

  componentDidMount() {
    const rootRef = firebase.database().ref().child('react');
    const speedRef = rootRef.child('url_01');
    speedRef.on('value', snap => {
      this.setState({
        speed: snap.val()
      });
    });
  }

  render() {
    return (

        <div>
          <h1>URL: {this.state.speed}</h1>
        </div>


    );
  }
}

2 回复 | 直到 6 年前

MrcRjs 6 年前

componentDidMount() {
    const rootRef = firebase.database().ref();
    const speedRef = rootRef.child('react');

    speedRef.once("value", snap => {
        // Handle state
        let speedsUrls = []
        snap.forEach(child => {
            speedsUrls.push(child.val())
        });
        this.setState({speed: speedsUrls})
    });
}

render() {
    const SpeedURLS = this.state.speed.map(url => <h1>URL: {url}</h1>);
    return (
        <div>
            {SpeedURLS}
        </div>
    );
}

Spring Page 6 年前

另一个解决方案:

const object1 = {
    "url_01" : "https://stackoverflow.com/",
    "url_02" : "https://google.com/",
    "url_03" : "https://www.youtube.com/"
};

let a = Object.values(object1);

A现在是

["https://stackoverflow.com/","https://google.com/","https://www.youtube.com/"]

推荐文章

Veselin Zinkov · Firebase实时数据库Web界面可视化错误

2 年前

Gusta · 为什么是我的物品。values()当我的对象数组有匹配的值时返回false?

2 年前

Gusta · 为什么我在尝试设置状态时会得到太多渲染?

2 年前

Alex · 如何使用javascript在firebase中进行过滤?

2 年前

Salvo · 函数无法读取useState参数

2 年前

Ejaj Ahmad · 如何从函数返回firebase数据?

2 年前

Amit Yadav · 如何使用javascript从firebase中的键获取值

2 年前

Yeury De los Santos · 在firebase实时数据库android中恢复删除的子项

2 年前

Andromeda · Firebase云函数已完成,状态为“错误”

6 年前

Janith Warnamana · 从firebase数据库检索数据到getvalue中的listview null

6 年前