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类（凭据除外）

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

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

这是Car功能

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渲染数据来应对问题

1 个答案: