Реагировать на счетную функцию One Up Up

Question

Я новичок в React / React Native и пытаюсь создать функцию, которая будет go от 0 до 100 и отображать ее в виде графика c. Имитация спидометра, который будет go от 0 до 100 миль в час. Итак, вот моя onPress функция, которая будет считать одну, если ее нажать:

import React, { Component } from 'react';
import {
    StyleSheet,
    TouchableOpacity,
    Text,
    View,
} from 'react-native';
import Speedometer from 'react-native-speedometer-chart';

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = { count: 0 }
    }

onPress = () => {
    this.setState({
        count: this.state.count+1
    })
}

Затем я добавил инструкцию while, что если count меньше 100, то она будет продолжать идти вверх. Проблема в том, что это не считается.

onPress = () => {
    while(this.state.count < 100) {
        this.setState({
            count: this.state.count+1
        })
    }
}

Может кто-нибудь помочь с этим. Вот полный код, который у меня есть:

import React, { Component } from 'react';
import {
    StyleSheet,
    TouchableOpacity,
    Text,
    View,
} from 'react-native';
import Speedometer from 'react-native-speedometer-chart';

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = { count: 0 }
    }

    onPress = () => {
        while(this.state.count <= 100) {
            this.setState({
                count: this.state.count+1
            })
        }
    }

    clear = () => {
        this.setState({
            count: this.state.count = 0
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.titleText}> AlphaDyne New Run Screen</Text>
                <TouchableOpacity style={styles.button} onPress={this.onPress}>
                    <Text> Start Run </Text>
                </TouchableOpacity>
                <View style={[styles.countContainer]}>
                    <Speedometer
                        value={this.state.count !== 0 ? this.state.count: 0}
                        totalValue={100}
                        size={250}
                        outerColor="#d3d3d3"
                        internalColor="#ff0000"
                        showText
                        text="MPH"
                        textStyle={{ color: '#ff0000' }}
                        showLabels
                        labelStyle={{ color: '#FF00FF' }}
                    />
                    <Text style={styles.countText}>{this.state.count !== 0 ? this.state.count: 0} MPH</Text>
                    <Text style={styles.space}></Text>
                    <Speedometer
                        value={this.state.count !== 0 ? this.state.count: 0}
                        totalValue={100}
                        size={250}
                        showIndicator
                        showLabels
                        labelStyle={{ color: '#FF00FF' }}
                    />
                    <Text style={styles.countText}>{this.state.count !== 0 ? this.state.count: 0} MPH</Text>
                    <Text style={styles.spacer}></Text>
                    <Text style={styles.spacer}></Text>
                    <TouchableOpacity style={styles.button} onPress={this.clear}>
                        <Text> Clear </Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 10
    },
    button: {
        alignItems: 'center',
        backgroundColor: '#DDDDDD',
        padding: 10
    },
    countContainer: {
        alignItems: 'center',
        padding: 10,
        marginTop: 20
    },
    countText: {
        color: '#FF00FF',
        fontSize: 20,
        marginTop: 10
    },
    titleText: {
        fontSize: 30,
        alignSelf: 'center',
        marginBottom: 20
    },
    space: {
        marginTop: 20
    }
});

Спасибо!

Answer 1

Вы должны вызвать функциональный setState, чтобы преодолеть проблемы асинхронности с вашим решением:

onPress = () => {
  while(this.state.count <= 100) {
    this.setState(previousState => ({ ...previousState, count: previousState.count + 1 }));
  }
}

для справки: https://reactjs.org/docs/faq-state.html#what - это разница между передачей объекта - или-а-функция-в-SetState