从 firebase 渲染数据的反应问题

Question

基本上我对从 firebase 到屏幕的渲染信息有疑问。当我试图在 componentDidMount() 中调用从数据库中获取信息的函数时，该函数甚至没有执行，但是当我在 render() 函数中调用它时，我知道现在这是正确的做法它工作，它进入一个无限循环，它一遍又一遍地访问数据库，但它在屏幕上呈现正确的信息。所以函数本身不是问题，我猜，因为它能够从数据库中检索信息。 componentDidMount() 中的 console.log() 似乎也有效，因此 componentDidMount() 确实会触发。那么我应该如何处理这个问题呢？我已经为此苦苦挣扎了几个小时。我似乎找不到问题。

这是我的代码：

export default class Cars extends Component {

    constructor(){
        super();

        this.state = {
            cars: []
        }
    }


    componentDidMount(){
        this.loadCarsFromDB();
    }

    loadCarsFromDB = () => (
        <FirebaseContext.Consumer>
            {firebase => {
                firebase.accessFirebase("cars").get()
                    .then(snapshot => {
                        let cars = [];
                        snapshot.docs.forEach(doc => {
                          cars.push(doc.data());
                        })
                        return cars;
                    })
                    .then(cars => {
                        this.setState({cars: cars});
                    })
                    .catch(err => {
                        console.log(err);
                    });
            }
            }
        </FirebaseContext.Consumer>
    )

    renderCars = () => {
        return this.state.cars.map(car => <Car
            brandName={car.brandName}
            model={car.model}
            color={car.color}
            price={car.price} />)
    }

    render() {
        return (
            <div className="car-item">
                {this.renderCars()}
            </div>
        );
    }
}

Firebase class 除了凭据

export default class Firebase {
    constructor() {
        app.initializeApp(config);
    }

    accessFirebase = () => {
        let db = app.firestore();
        return db.collection("cars");
    }
}

这是汽车功能

const car = (props) => (
    <div className="Car">
        <span>{props.brandName ? props.brandName : "Nu exista"}</span>
        <span>{props.model ? props.model : "Nu exista"}</span>
        <span>{props.color ? props.color : "Nu exista"}</span>
        <span>{props.price ? props.price : "Nu exista"}</span>
    </div>
)

export default car;

这是 index.js 文件。我不知道，也许这与上下文的使用有关。我基本上只创建一个 firebase 实例，它应该允许我仅使用这个实例从代码中的任何地方查询数据库。

ReactDOM.render(
    <FirebaseContext.Provider value={new Firebase()}>
        <App />
    </FirebaseContext.Provider>, 
    document.getElementById('root')
);

serviceWorker.unregister();

App.jsx 文件

class App extends Component {
  render(){
    return(
      <div>
        <Cars/>
      </div>
    )
  }
}

export default App;

Answer 1

您不应该使用 loadCarsFromDB 中的 FirebaseContext.Consumer 组件。所以我会在 Cars 周围举起 FirebaseContext.Consumer 并将 firebase 属性作为道具传递下去。

class App extends Component {
  render(){
    return(
      <div>
          <FirebaseContext.Consumer>
            {firebase => (
              <Cars firebase={firebase}/>
              )
            }
          <FirebaseContext.Consumer />
      </div>
    )
  }
}

    loadCarsFromDB = () => (
      this.props.firebase.accessFirebase("cars").get()
          .then(snapshot => {
              let cars = [];
              snapshot.docs.forEach(doc => {
                cars.push(doc.data());
              })
              return cars;
          })
          .then(cars => {
              this.setState({cars: cars});
          })
          .catch(err => {
              console.log(err);
          });
    )

从 firebase 渲染数据的反应问题

React issue with rendering data from firebase

javascript

render

reactjs