Question

我有这段代码

class PaintingPage extends Component {
 constructor(props){
   super(props)
   this.state = {
     paintings: []
   }
   this.database = this.database.bind(this);
 }

 database = () => {
   let db = fire.firestore();
   db.collection('PaintingProjects')
   .get()
   .then( snapshot => {
     let paintingData = [];
     snapshot.forEach( doc => {
       const data = doc.data()
       paintingData.push(data);
       console.log(paintingData, '1st')
       this.setState({
         paintings: paintingData,
       })
       console.log(this.paintings, '2nd')
     })
   })
 }

 componentWillMount(){
   this.database()
 }

我正在尝试将我的PaintingProjects集合保存到我的状态。当我记录paintingData数组时，所有数据都存在，但是在将其保存到我的状态并记录我的状态后，它以未定义的形式返回我在做什么错了？

Answer 1

使用componentDidMount代替willMount。

“ componentWillMount（）在安装发生之前立即被调用。它在render（）之前被调用，因此，在此方法中设置状态不会触发重新渲染。请避免在此方法中引入任何副作用或订阅。”

Answer 2

console.log(this.paintings, '2nd')不会记录新状态，但是未定义，您应该使用this.state.paintings，但是请注意，它将记录先前的状态而不是新的状态。

您也不应该在componentWillMount中引入副作用。不会等待ComponentWillMount，因此，至少在componentDidMount发生同样的情况下，您的组件将至少在没有数据的情况下呈现。但是，使用componentDidMount，您可以确保componenet支持空状态。

来源：

Firebase数据未保存到我的反应状态

2 个答案: