Изменение состояния с помощью пользовательской кнопки в React Native

#reactjs #react-native #react-hooks

#reactjs #react-native #реагирующие крючки

Вопрос:

Я только начинаю с React native и хочу обновить состояние со своей домашней страницы, нажав на пользовательскую кнопку. Я сделал этот код только ниже. Когда я нажимаю на свои кнопки, я не вижу изменения состояния.

 const Home = () => {
  const welcomeSentence =
    "Bonjour, est ce que tu as fais ton workout aujourd'hui ?";
    const [isWorkoutDone, setIsWorkoutDone] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.homePageText}>{welcomeSentence}</Text>
      <View style={styles.buttonContainer}>
        <AppButton title ="OUI" onPress={()=>this.setIsWorkoutDone(true)}/>
        <AppButton title ="NON" onPress={()=>this.setIsWorkoutDone(false)}/>
      </View>
      <Text>{isWorkoutDone ? "OK" : "KO"}</Text>
    </View>
  );
};
 

С помощью этого кода на моей кнопке cutom :

 const AppButton = (props) => {
  return (
    <Button
      title={props.title}
      onPress={props.onPress}
      style={styles.appButton}
    />
  );
};
 

Я протестировал и выполнил поиск, но не нашел, почему мое состояние не изменилось.

Ответ №1:

Вы используете функциональный компонент, поэтому он вам не нужен this .

    <AppButton title ="OUI" onPress={()=>setIsWorkoutDone(true)}/>
   <AppButton title ="NON" onPress={()=>setIsWorkoutDone(false)}/>