Я не могу изменить значение с помощью setState в React Native

#javascript #reactjs #react-native

Вопрос:

Я изучаю react native и последние 3 дня пытаюсь решить эту проблему.

Я использую EXPO, кнопки не меняют значение в const [isStarted, setIsStarted] = useState(false)

Названия кнопок: «пауза» и «старт».

Вот мой код:

 import React, { useState,useEffect } from 'react';
import { View, StyleSheet, Text, Button,Alert } from 'react-native';
import { colors } from '../../utils/colors';
import { spacing } from '../../utils/sizes';
import { Countdown } from '../../components/Countdown';
import { RoundedButton } from '../../components/RoundedButton';
import {ProgressBar} from 'react-native-paper';

export const Timer = ({ focusSubject }) => {
  const [isStarted, setIsStarted] = useState(false);
  return (
    <View style={styles.container}>
      <View style={styles.countdown}>
        <Countdown isPaused={!isStarted}/>
      </View>
      <View styles={{ paddingTop: spacing.xxl }}>
        <Text style={styles.title}> Focusing on: </Text>
        <Text style={styles.task}> {focusSubject} </Text>
      </View>

    <View style= {styles.buttonWrapper}>
    {isStarted ? (
      **<RoundedButton title="pause" onPress={() => setIsStarted(false)} />**
    ) : (
      **<RoundedButton title="start" onPress={() => setIsStarted(true)} />**
    
    )}
    </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    color: colors.white,
    textAlign: 'center',
  },
  task: {
    color: colors.white,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  countdown: {
    flex: 0.5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonWrapper: {
    alignItems: 'center',
    flex: 0.3,
    padding: 15,
    justifyContent: 'center',

  },
});

1. Меня беспокоит тот импортированный компонент, который вы использовали. Не могли бы вы подтвердить, есть ли у вас какой-либо метод с именем onPress, определенный для этого компонента RoundedButton? Может быть, это один клик по этому компоненту, не уверен.

2. Проверьте, вызывается ли onPress или нет. Кроме того, опубликуйте код для кнопки округления

3. Пожалуйста, обновите код округленной кнопки, код может быть значительно упрощен

Ответ №1:

Вам нужно передать имя реквизита компоненту RoundedButton, а внутри него вам нужно вызвать onPress

для бывших:

 import React, { useState,useEffect } from 'react';
import { View, StyleSheet, Text, Button,Alert } from 'react-native';
import { colors } from '../../utils/colors';
import { spacing } from '../../utils/sizes';
import { Countdown } from '../../components/Countdown';
import { RoundedButton } from '../../components/RoundedButton';
import {ProgressBar} from 'react-native-paper';

export const Timer = ({ focusSubject }) => {
  const [isStarted, setIsStarted] = useState(false);
  const onButtonPress = () => {
     setIsStarted(!isStarted)
  }
  return (
    <View style={styles.container}>
      <View style={styles.countdown}>
        <Countdown isPaused={!isStarted}/>
      </View>
      <View styles={{ paddingTop: spacing.xxl }}>
        <Text style={styles.title}> Focusing on: </Text>
        <Text style={styles.task}> {focusSubject} </Text>
      </View>

    <View style= {styles.buttonWrapper}>
      <RoundedButton title={isStarted ? "pause" : "start"} onButtonHandler={onButtonPress} />
    </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    color: colors.white,
    textAlign: 'center',
  },
  task: {
    color: colors.white,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  countdown: {
    flex: 0.5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonWrapper: {
    alignItems: 'center',
    flex: 0.3,
    padding: 15,
    justifyContent: 'center',

  },
});

Здесь я добавил обработчик кнопки в качестве опоры в RoundedButton, теперь внутри вызова onPress={onButtonHandler} RoundedButton в осязаемом событии.

Если вы все еще сталкиваетесь с проблемами, пожалуйста, поделитесь обновлением кода компонента RoundedButton