Javascript 使用react从firebase渲染数据

如何在react中渲染firebase中的数据？我尝试了这个代码，但什么都没有显示！ 用户不是数组吗？ 因为当我把这样的东西放到

users=[1,2,3]

中时，它就起作用了

import React, { Component } from 'react';
import axios from './axios-users';

class App extends Component {

render() {
let users = [];
axios.get('/users.json')
    .then(response => {
        console.log(response.data);
        users = response.data;
} );
const listItems = users.map((users) =>
  <li>{users}</li>
);
return (
  <div className="App">
    <ul>{listItems}</ul>
  </div>
);
}
}
export default App;

import React，{Component}来自'React'；
从“/axios用户”导入axios；
类应用程序扩展组件{
render（）{
让用户=[]；
get（'/users.json'）
。然后（响应=>{
console.log（response.data）；
用户=response.data；
} );
const listItems=users.map（（users）=>
{用户}
);
返回(
{listItems}
);
}
}
导出默认应用程序；

console.log（response.data）

---

您可以将状态用于此工作，因为您正在使用axios执行异步工作，这就是为什么用户将在查看渲染后进行分配

import React, { Component } from "react";
import axios from "./axios-users";

class App extends Component {
  constructor() {
super();
    this.state = {
      users: []
    };
    this.handleAxiosAction();
  }

  handleAxiosAction = () => {
    axios.get("/users.json").then(response => {
      console.log(response.data);
      this.setState({ users: response.data });
    });
  };



      render() {
    const listItems = this.state.users.map(user => <li key={user.id}>{user}</li>);
    return (
      <div className="App">
        <ul>{listItems}</ul>
      </div>
    );
  }

}
export default App;

import React，{Component}来自“React”；
从“/axios用户”导入axios；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
用户：[]
};
这个.handlexiosaction（）；
}
手工操作=（）=>{
get（“/users.json”）。然后（响应=>{
console.log（response.data）；
this.setState（{users:response.data}）；
});
};
render（）{
const listItems=this.state.users.map（user=>
{user}
）；
返回(
{listItems}
);
}
}
导出默认应用程序；

我认为您共享的代码中没有任何与firebase相关的内容。数据来自firebase，使用的是

axios.get（'/users.json'）

您正在渲染中执行axios调用。这只是一个很大的“不”，请在

componentDidMount

中执行。而且，axios调用是异步的，因此它不会等待axios调用完成。因此，当您返回时，

users

仍将是一个空数组。在axios回调中将用户存储在状态中，然后呈现状态在

构造函数中进行AJAX调用被认为是一种不好的做法。请参见：我是否应该在
this.state
之前添加
super（）
？
this.state.users.map不是一个函数
：（您在'response.data'中得到的是什么？它应该是一个数组，否则我将抛出error.Array of arrays