function 单选按钮值无法正常工作 - 反应原生

Question

我在我的应用程序中做一个简单的测验，里面有我要输入的问题，我做了 2 个单选按钮作为试验，然后我按下 function 取按下按钮的值，然后测试它是否等于正确值，但它不能正常工作，它有时会在两个按钮上提醒“做得好”，有时会提醒“不正确”。 这是代码：

 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两次，然后立即引用 state 。 在此设置中，您不知道您引用的是新的还是旧的 state，这就是它“有时”起作用的原因； 这是一个竞赛条件。

您应该在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);