Блог

Я довольно новичок в идее состояний в react native, и у меня возникают проблемы с их использованием для изменения состояний компонентов. У меня есть три текстовых компонента, один из которых является вопросом, а два других — ответами (да и нет), и еще один текстовый компонент, который проверяет, является ли мой ответ на вопрос write, поэтому проверьте текстовый компонент. Когда я нажимаю «да» для определенного вопроса, состояние компонента последней проверки должно измениться на «правильное», если ответ был утвердительным, или на «неправильное», если ответ отрицательный. Итак, в принципе, это то, что я хочу сделать :

Это то, что у меня есть до сих пор:

Это ошибка, которую я получаю :

Это код, который у меня есть до сих пор:

 import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Alert, ScrollView, Image } from 'react-native';
// import TextComp from './components/Home2'
export default function App() {

  const [answer, setAnswer] = useState('answer');
  const [correctAns, setCorrectAns] = useState('');

  const useEffect = () => {
    if (answer == 'answer') {
      setCorrectAns('please answer!');
    } else if (answer == 'Yes') {
      setCorrectAns('Right');
    } else if (answer == 'No') {
      setCorrectAns('Wrong');
    };
  };
  const corAns = () => { Alert('Your answer was ', correctAns) }

  return (
    <ScrollView style={styles.container}>

      <View style={{ alignItems: 'center' }}>

        <Image source={require('./images/pic.jpeg')} style={styles.uriImg} />

        <Text style={styles.title}>Is this Mt. Fuji?</Text>
        <TouchableOpacity
          onPress={() => setAnswer('Yes')}>
          <Text style={styles.text}>Yes</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => setAnswer('No')}>
          <Text style={styles.text}>No</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={corAns}>
          <Text style={styles.text2}>Check</Text>
        </TouchableOpacity>

        <Image source={require('./images/yellow.png')} style={styles.uriImg} />

        <Text style={styles.title}>Is this red color?</Text>
        <TouchableOpacity
          onPress={() => setAnswer('Yes')}>
          <Text style={styles.text}>Yes</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => setAnswer('No')}>
          <Text style={styles.text}>No</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={corAns}>
          <Text style={styles.text2}>Check</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>);
}

  

Кто-нибудь может сказать мне, как это можно сделать? Спасибо!

используйте useEffect следующим образом

 useEffect(() => {
 if (answer === 'Yes') {
  Alert.alert('Right')
 }
 if (answer === 'No') {
 Alert.alert('Wrong')
 }
}, [ answer ])  

или нажатием кнопки проверки

    const checkAnswer = () => {
     if (answer === 'Yes') {
      Alert.alert('Right')
     }
     if (answer === 'No') {
     Alert.alert('Wrong')
     }
     if (answer === 'answer') {
          Alert.alert('please answer')
     }
    }
    
      

установите кнопку проверки onPress={checkAnswer}