必须两次按onPress来增加this.state.count-React Native

Question

第一个问题！

我在Expo上有文件-https://snack.expo.io/@pssoor/Y3JhYm

我的问题是，如果您正确回答了乘法问题，则必须在累加器工作之前再次按一下它。其他所有功能都正常。

代码背后的想法是从模态中选择一个数字，该模式使一个数字数组达到该特定数字。然后将阵列混洗。出现一个问题（？*累加器=总数），用户可以回答。

希望有人可以提供帮助！

谢谢 这是整个零食（很抱歉！）

const arr = []

export default class NumberBonds extends React.Component {

constructor() {
    super()

    this.state = {
        accumulator: '',
        count: 0,
        number: '',
        total: '',
    }
}

// Modal Functions
setModalVisible(visible) {
    this.setState({ modalVisible: !visible })
}

renderArray(val) {
    for (let i = 1; i <= val; i++) { arr.push(i) } let i = 0; let j = 0; let temp = null; for (i = arr.length - 1; i > 0; i -= 1) { j = Math.floor(Math.random() * (i + 1)); temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; }

    this.setModalVisible(!this.state.modalVisible)
    this.setState({
        accumulator: arr[this.state.count],
    })
    return arr
}

modalPassValue(value) {
    this.setState({
        total: this.state.total + value
    })
}

// Main Functions

customAlertCorrect() {
    Alert.alert(
        'Correct',
        'Well Done!',
        [
        {
                text: 'Next', 
                onPress: () => {this.setState(prevState => ({count: prevState.count + 1}))}
        }]
        )
}

customAlertDone() {
    Alert.alert('Fantastic', 'All Done!')
}

customAlertWrong() {
    Alert.alert('Not Quite', 'Try Again!')
}

check() {

    // If numbers matching, say correct. Move on. If not matching, say incorrect. Move on. If matching and then no more, STOP
    if (parseInt(this.state.number) + this.state.accumulator === parseInt(this.state.total)) {
        this.setState( {
            number: '',
            accumulator: arr[this.state.count]
        })

        this.customAlertCorrect()

    } else {
        this.customAlertWrong()
        this.setState({
            number: '',
        })
    }
    if (parseInt(this.state.count) === parseInt(this.state.total)) {
        this.customAlertDone()
    }
}


render() {
    return (
        <View style={styles.container}>
            <View style={{ marginTop: 100, marginLeft: 100 }}>
                <Modal animationType="slide" transparent={false} visible={this.state.modalVisible}>
                    <View>
                        <View style={{ marginTop: 50, }}>
                            <Text style={{ fontSize: 50, fontFamily: 'hobostd', }}>Enter your Number Bond</Text>
                            <Text style={{ fontSize: 50, backgroundColor: 'pink', height: 200, color: 'white' }}>{this.state.total}</Text>
                        </View>
                    </View>
                    <View style={{ flex: 1, backgroundColor: 'white', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center' }}>
                        <View style={{ backgroundColor: 'white', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start' }}>
                            <TouchableOpacity onPress={() => this.modalPassValue(1)} style={styles.buttons}><Text style={styles.buttonsText}>1</Text></TouchableOpacity>
                            <TouchableOpacity onPress={() => this.modalPassValue(2)} style={styles.buttons}><Text style={styles.buttonsText}>2</Text></TouchableOpacity>
                            <TouchableOpacity onPress={() => this.modalPassValue(3)} style={styles.buttons}><Text style={styles.buttonsText}>3</Text></TouchableOpacity>
                            <TouchableOpacity onPress={() => this.modalPassValue(4)} style={styles.buttons}><Text style={styles.buttonsText}>4</Text></TouchableOpacity>
                            <TouchableOpacity onPress={() => this.modalPassValue(5)} style={styles.buttons}><Text style={styles.buttonsText}>5</Text></TouchableOpacity>
                            <TouchableOpacity onPress={() => this.modalPassValue(6)} style={styles.buttons}><Text style={styles.buttonsText}>6</Text></TouchableOpacity>
                            <TouchableOpacity onPress={() => this.modalPassValue(7)} style={styles.buttons}><Text style={styles.buttonsText}>7</Text></TouchableOpacity>
                            <TouchableOpacity onPress={() => this.modalPassValue(8)} style={styles.buttons}><Text style={styles.buttonsText}>8</Text></TouchableOpacity>
                            <TouchableOpacity onPress={() => this.modalPassValue(9)} style={styles.buttons}><Text style={styles.buttonsText}>9</Text></TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({ total: '' })} style={styles.buttons}><Text style={styles.buttonsText}>Del</Text></TouchableOpacity>
                            <TouchableOpacity onPress={() => this.modalPassValue(0)} style={styles.buttons}><Text style={styles.buttonsText}>0</Text></TouchableOpacity>
                            <TouchableOpacity onPress={() => this.renderArray(this.state.total)} style={styles.buttons}><Text style={styles.buttonsText}>Done</Text></TouchableOpacity>

                        </View>
                    </View>
                </Modal>
            </View>

            <View style={{ marginBottom: 20 }}><Text style={{ fontSize: 50, textAlign: 'center' }}>Accumulator: {this.state.accumulator}</Text></View>
            <View style={{ marginBottom: 20, flexDirection: 'row', justifyContent: 'space-around' }}>
                <View style={{ backgroundColor: 'red', height: 70, width: 100, borderRadius: 20, }}><Text style={{ fontSize: 50, textAlign: 'center', }}>{this.state.accumulator}</Text></View>
                <Text style={{ fontSize: 50, textAlign: 'center', height: 50, width: 40, }}>+</Text>
                <View style={{ backgroundColor: 'yellow', height: 70, width: 100, borderRadius: 20, }}><Text style={{ fontSize: 50, textAlign: 'center', }}>{this.state.number}</Text></View>
                <Text style={{ fontSize: 50, textAlign: 'center', height: 50, width: 40, }}>=</Text>
                <View style={{ backgroundColor: 'orange', height: 70, width: 100, borderRadius: 20, }}><Text style={{ fontSize: 50, textAlign: 'center', }}>{this.state.total}</Text></View>
            </View>

            <View style={{ flex: 1, backgroundColor: 'white', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center' }}>
                <View style={{ backgroundColor: 'white', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center' }}>
                    <TouchableOpacity onPress={() => this.setState({ number: this.state.number + 1 })} style={styles.buttons}><Text style={styles.buttonsText}>1</Text></TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ number: this.state.number + 2 })} style={styles.buttons}><Text style={styles.buttonsText}>2</Text></TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ number: this.state.number + 3 })} style={styles.buttons}><Text style={styles.buttonsText}>3</Text></TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ number: this.state.number + 4 })} style={styles.buttons}><Text style={styles.buttonsText}>4</Text></TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ number: this.state.number + 5 })} style={styles.buttons}><Text style={styles.buttonsText}>5</Text></TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ number: this.state.number + 6 })} style={styles.buttons}><Text style={styles.buttonsText}>6</Text></TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ number: this.state.number + 7 })} style={styles.buttons}><Text style={styles.buttonsText}>7</Text></TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ number: this.state.number + 8 })} style={styles.buttons}><Text style={styles.buttonsText}>8</Text></TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ number: this.state.number + 9 })} style={styles.buttons}><Text style={styles.buttonsText}>9</Text></TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ number: '' })} style={styles.buttons}><Text style={styles.buttonsText}>Del</Text></TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ number: this.state.number + 0 })} style={styles.buttons}><Text style={styles.buttonsText}>0</Text></TouchableOpacity>
                    <TouchableOpacity onPress={() => this.check()} style={styles.buttons}><Text style={styles.buttonsText}>Check</Text></TouchableOpacity>

                </View>
            </View>
        </View>
    );
  }
}