setTimeout в Реагируют Собственный компонент
Я пытаюсь загрузиться, экран-заставка для приложения для iOS встроил, Реагируют Собственный компонент. Я пытаюсь выполнить это через состояния класса и затем функцию setTimeout следующим образом:
class CowtanApp extends Component {
constructor(props){
super(props);
this.state = {
timePassed: false
};
}
render() {
setTimeout(function(){this.setState({timePassed: true})}, 1000);
if (!this.state.timePassed){
return <LoadingPage/>;
}else{
return (
<NavigatorIOS
style = {styles.container}
initialRoute = {{
component: LoginPage,
title: 'Sign In',
}}/>
);
}
}
}
Загружающаяся страница работает в течение секунды, и затем я предполагаю, когда setTimeout пытается изменить состояние на истинный, мои катастрофические отказы программы: 'неопределенный не объект (оценивающий this.setState)'. Я шел в этом в течение нескольких часов, каких-либо идей о том, как зафиксировать его?
6 ответов
Классическая ошибка JavaScript.
setTimeout(function(){this.setState({timePassed: true})}, 1000)
, Когда setTimeout выполнения this.setState, this больше не CowtanApp, но window. При определении функции с =>, нотация, es6 автосвяжет this.
setTimeout(() => {this.setState({timePassed: true})}, 1000)
, С другой стороны, Вы могли использовать let that = this; наверху Вашего render, затем переключить свои ссылки для использования локальной переменной.
render() {
let that = this;
setTimeout(function(){that.setState({timePassed: true})}, 1000);
Запишите новую функцию для settimeout. Попробуйте это.
class CowtanApp extends Component {
constructor(props){
super(props);
this.state = {
timePassed: false
};
}
componentDidMount() {
this.setTimeout( () => {
this.setTimePassed();
},1000);
}
setTimePassed() {
this.setState({timePassed: true});
}
render() {
if (!this.state.timePassed){
return <LoadingPage/>;
}else{
return (
<NavigatorIOS
style = {styles.container}
initialRoute = {{
component: LoginPage,
title: 'Sign In',
}}/>
);
}
}
}
Измените этот код:
setTimeout(function(){this.setState({timePassed: true})}, 1000);
к следующему:
setTimeout(()=>{this.setState({timePassed: true})}, 1000);
На ReactNative.53, следующих работах для меня:
this.timeoutCheck = setTimeout(() => {
this.setTimePassed();
}, 400);
'setTimeout' является библиотечной функцией ReactNative.
'this.timeoutCheck' является моей переменной для содержания времени, возражают.
'this.setTimePassed' является моей функцией для вызова в то время.
Можно связать this с функцией путем добавления .bind(this) непосредственно в конец функционального определения. Вы переписали бы свой блок кода как:
setTimeout(function () {
this.setState({ timePassed: true });
}.bind(this), 1000);
То же как выше, мог бы помочь некоторым людям.
setTimeout(() => {
if (pushToken!=null && deviceId!=null) {
console.log("pushToken & OS ");
this.setState({ pushToken: pushToken});
this.setState({ deviceId: deviceId });
console.log("pushToken & OS "+pushToken+"\n"+deviceId);
}
}, 1000);