diese.setTimeout() ist keine Funktion, Reagieren die einheimischen?

Ich versuche, erstellen Sie eine einfache Stoppuhr in Reagieren Nativen und ich habe eine neue Komponente namens “ Chrono-behandeln-die-Uhr-Daten(Stunden, Minuten, etc.)

Ich bin die Auslösung der Uhr zählen, bis Sie auf eine Schaltfläche, drücken Sie in den folgenden code:

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, AppRegistry, StyleSheet, Alert } from 'react-native';
import Chrono from './app/Chrono.js';

export default class morphX extends Component {
  constructor(props) {
    super(props)
    this.state = {
      randomCounter: 0
    }
    this.chrono = null
  }

  onItemPressed = () => {
    this.chrono.startTimer()
  }

  updateRandomCounter = () => {
    this.setState({
      randomCounter: this.state.randomCounter + 1
    })
  }

  clearCounter = () => {
    this.setState({ 
      randomCounter: 0
    })
  }

  render() {
    return (
      <View style={styles.mainWrapper}>
        <View style={styles.upperWrapper}>
          <Chrono ref = { r => this.chrono = r} />
        </View>
        <View style={styles.bottomWrapper}>
          <View style={styles.initialButtons}>
            <TouchableOpacity
              style={styles.touchableButton}
              text="Let's Start!"
              onPress={() => this.onItemPressed()}>
              <Text style={styles.buttonTexts}>
                Count Up!
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.touchableButton}
              title="RESET!"
              onPress={() => this.clearCounter()}>
              <Text style={styles.buttonTexts}>
                Reset!
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}
AppRegistry.registerComponent('morphX', () => morphX);

und die startTimer ist implementiert in der Chrono.js Komponente hier:

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, AppRegistry, StyleSheet, Alert } from 'react-native';

class Chrono extends Component {
    constructor(props) {
        super(props)
        this.state = {
            hours: 0,
            minutes: 0,
            seconds: 0
        }
    }

    //Chronometer start function
    startTimer = () => {
        console.log(this)
        this.setTimeout(function() {
            console.log('HeY!')
            this.setState({
                seconds: 1
            })  
        }, 1000);
    }

    //Chronometer pause function 
    pauseTimer = () => {

    }

    //Chronometer reset function 
    resetTimer = () => {

    }

    render() {
        return (
            <View style={styles.clockWrapper}>
                <Text style={styles.hourWrapper}>
                    {this.state.hours}
                </Text>
                <Text style={styles.colonWrapper}>
                    :
                </Text>
                <Text style={styles.minuteWrapper}>
                    {this.state.minutes}
                </Text>
                <Text style={styles.colonWrapper}>
                    :
                </Text>
                <Text style={styles.secondsWrapper}>
                    {this.state.seconds}
                </Text>
            </View>
        )
    }
}

export default Chrono

Ich stehe vor dem Fehler

this.setTimeout ist nicht eine Funktion

auf die Zeile, wo ich den Aufruf der setTimeout aus irgendeinem Grund. Warum?

  • Reagieren-Native hat seine eigene Implementierung von Timern.
  • reagieren,-Muttersprachler in der Regel kommt mit allen Funktionen, alle zusammen. 99% der Themen gesprochen, die in Google docs bereits enthalten, dies ist einer der das ist nicht. Seine ziemlich verständlich für einen neuen Benutzer zu erwarten, dass es bereits enthalten.
  • Ich bin schockiert zu sehen, dass die mixin legt es auf die Komponente selbst. Nach dem link von dir unten erklärt, warum; ohne diesen Kontext ist, wie es scheint, massive Geruch. Und erklärt, dass die OP ‚ s Frage, danke.
InformationsquelleAutor hexpheus | 2017-09-10



2 Replies
  1. 4

    TimerMixin ist nicht im Lieferumfang der Standard-reagieren-native. Sie müssen es selbst installieren und dann können Sie this.setTimeout. Überprüfen Sie hier für detaillierte Informationen.

    Diese Bibliothek ist nicht im Lieferumfang Reagieren Native – um es zu benutzen auf
    Ihr Projekt, müssen Sie es installieren

    npm i react-timer-mixin --save

    aus dem Projekt-Verzeichnis.


    Beachten Sie, dass bei Verwendung von ES6-Klassen für Komponenten Reagieren
    es gibt keine built-in-API für Mixins in Verbindung. Verwenden TimerMixin mit ES6
    Klassen, empfehlen wir reagieren-mixin.

    • (november 2017). Ich hoffe, dass alle, die mit ES6. Und (github.com/brigand/react-mixin) reagieren-mixin wird gesagt, veraltet. Ist das der richtige Weg um das Problem zu lösen ?
    • Ich glaube nicht, es ist immer noch eine gültige Lösung.
    • Ok. ich dachte, die Antwort war veröffentlicht im September 2017. Ich werde versuchen post einen neuen dann
    • es wäre schön, um bessere Antworten, wenn Sie irgendwelchen haben. OP ändern kann, die Antwort ans ich das löschen kann mir
    • stackoverflow.com/questions/47513549/…, fühlen Sie sich frei, um alle details im Bearbeiten-Modus 😉
  2. 1

    Ich bin setTimeout() ohne react-timer-mixin, und seine Ordnung, die in meiner Anwendung.

    componentDidMount() {
    
        const a = setTimeout(() => {
    
          //do some stuff here
    
        }, 100);
    
    }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.