Question

我有点困惑...在componentWillMount（）之前调用render（）

 import React,{Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
AsyncStorage
} from 'react-native';
import * as firebase from 'firebase';
import Chart from 'react-native-chartjs';
import moment from 'moment'
import { Icon } from 'react-native-elements'
import PureChart from 'react-native-pure-chart';



export default class History extends Component {
  state={LoginId: ''}
constructor(){
     super();
     console.log("in constructor");
     global.arrayDate = [];
     global.arrayStep = [];
     //sampleData = [];
     global.sampleData= [];

 }
 componentWillMount() {
/*console.log(" in ComponentWillMount")
const LoginId = AsyncStorage.getItem("LoginId")
this.setState({ LoginId: JSON.parse(LoginId) });
AsyncStorage.getItem("LoginId").then((value) => {
  this.setState({"LoginId": value});
console.log("in CMW", LoginId)
})*/
console.log(" in CWM")
AsyncStorage.getItem("LoginId").then((value) => {
  this.setState({"LoginId": value});
console.log("Loginid in componentwillmount is", this.state.LoginId)
})
.then( res => {


console.log("configuring firebase");
var range = moment().week();
var date;
var ra= range.toString()

var docRef= firebase.firestore().collection('data').doc(this.state.LoginId).collection('y').doc('eks').collection(ra);
docRef.orderBy("weekDayNo").get().then(snapshot => {
          snapshot.forEach(doc => {
date=doc.data().weekDayName
arrayDate.push(date);
step=doc.data().Count
arrayStep.push(step);

})
})
console.log(arrayStep);


a0 = arrayDate[0]
console.log('a0 ',a0)

a1 = arrayDate[1]
console.log('a1 ',a1)

a2 = arrayDate[2]
console.log('a2 ',a2)


a3 = arrayDate[3]
console.log('a3 ',a3)


a4 = arrayDate[4]
console.log('a4 ',a4)


a5 = arrayDate[5]
console.log('a5 ',a5)


a6 = arrayDate[6]
console.log('a6 ',a6)

b0 = arrayStep[0]
console.log('b0 ',arrayStep[0])

b1 = arrayStep[1]
console.log('b1 ',arrayStep[1])

b2 = arrayStep[2]
console.log('b2 ',arrayStep[2])

b3 = arrayStep[3]
console.log('b3 ',arrayStep[3])

b4 = arrayStep[4]
console.log('b4 ',arrayStep[4])

b5 = arrayStep[5]
console.log('b5 ',arrayStep[5])

b6 = arrayStep[6]
console.log('b6 ',arrayStep[6])


console.log("display chart")


})

}
 render() {

     console.log("in render")
   sampleData = [
        {x: '2018-01-01', y: 30},
        {x: '2018-01-02', y: 200},
        {x: '2018-01-03', y: 170},
        {x: '2018-01-04', y: 250},
        {x: '2018-01-05', y: 10},
   {x: '2018-01-04', y: 250},
        {x: '2018-01-05', y: 10}
   ]




    //this.getChartData();


  return(

<View>
 <PureChart data={sampleData} type='bar' backgroundColor="#8c8c8c" highlightColor="#ef4048" height={350}  defaultColumnWidth={40} />
</View>
)
}


}

在componentWillMount（）的此处，我正在通过从Firestore提取详细信息的那个ID从异步存储中检索用户ID。检索到的数据应显示在图表中，即react-native-pure-chart。现在，我在“ sampleData数组”中提供静态数据，但是在componentWillMount（）完成之前，将调用render（），这可以在控制台日志中看到，如下所示：

在构造函数中

在ComponenrWillMount中[18:35:13]

[18:35:13]在渲染中

[18:35:13]在渲染中

[18:35:13] componentwillmount中的Loginid为“ nabc”

[18:35:13]配置Firebase ........等等

由于componentWillMount（）包含许多行，因此它仅执行第一行并跳转以呈现，然后再次返回componentWillMount（），

我需要完成整个componentWillMount（），然后应调用render（），以便图形将接收所需的数据...

有人可以帮助我完成整个componentWillMount（）然后调用render（）吗？

提前谢谢

Answer 1

我最近一直在了解这一点-您应该真正在componentDidMount中进行异步调用。

...WillMount在第一个render()之前将不返回任何异步调用。

在ES6中，constructor()与componentWillMount()相同...因此，您实际上不需要使用它。

Answer 2

您正在componentWillMount中进行异步操作，异步操作意味着一个进程独立于其他进程运行，因此不会停止您的代码。

您的代码将以这种方式运行

调用构造函数
执行构造器中的所有代码
然后调用componentWillMount
在cwm中启动异步操作--->它们将独立运行
异步1
异步2
调用render（）
内部执行的行一一呈现...
aysnc 1完成//将对您编写的内容进行控制台
内部连续执行的行一一呈现...
aysnc 2完成//将对您编写的内容进行控制台

希望您能随便问问题。

在componentWillMount（）完成之前调用render（）

2 个答案: