рендеринг данных из базы данных с реагированием

Question

как мне отрендерить данные из 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;

console.log (response.data)

Answer 1

Вы можете использовать состояние для этой работы, потому что вы выполняете асинхронную работу с 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;