функция для значения переключателя некорректно работает

Question

Я делаю простую викторину в своем приложении с вопросами, которые я задаю, я сделал 2 переключателя в качестве пробных, а затем заставил функцию при нажатии принять значение нажатой кнопки, а затем проверить, равна ли она на правильное значение, но он не работает правильно, иногда он предупреждает о «хорошей работе», а иногда «не правильно» на обеих кнопках. Вот код:

import * as React from 'react';
import RadioForm from 'react-native-simple-radio-button';
import {
    Image, Platform, StyleSheet, Text, TouchableOpacity, View, radio, Alert, Button,
    ScrollView
} from 'react-native';

var radio_props = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
];

class Quiz extends React.Component {
    state = {
        value1: 0,
        correct1: 0,
    }

    checkquestion(value) {
        this.setState({ correct1: 1 })
        this.setState({ value1: value })
        if (this.state.value1 === this.state.correct1) {
            Alert.alert("goodk job")
        }
        else {
            Alert.alert("not correct")
        }

    }
    render() {
        return (
            <View>
                <Text>Choose number one</Text>
                <RadioForm
                    radio_props={radio_props}
                    onPress={(value) => { this.checkquestion(value) }}
                />
            </View>
        )
    }
}
export default Quiz

`

Answer 1

Я думаю, вы пойманы тем фактом, что setState работает асинхронно ... В данный момент вы дважды вызываете setState, а затем ссылаетесь на состояние сразу после этого. В этой настройке вы не знаете, ссылаетесь ли вы на новое или старое состояние, поэтому оно «иногда» работает; это условие гонки.

Вы должны использовать аргумент обратного вызова на setState. Я создал для вас новый метод displayAlert, который вызывается после завершения setState. Я также рекомендую устанавливать оба состояния одновременно, как я сделал в этом коде. Это должно предотвратить любые странности.

 displayAlert = () => {
    const {value1, correct1} = this.state;
    const isCorrect = value1 === correct1;
    const alertMessage = isCorrect ? "Good job!" : "Not correct";

    Alert.alert(alertMessage);
  };

  checkquestion = value => this.setState({correct1: 1, value1: value}, this.displayAlert);