как здесь писать конструктивные функции? - PullRequest
Новая
       4

как здесь писать конструктивные функции?

0 голосов
/ 10 июля 2020

Я делаю простое приложение, ориентированное на реакцию, и в моем симуляторе возникла следующая ошибка: введите описание изображения здесь

мой код следующий: 

import {
  Text,
  View,
  Button,
  Alert,
  Switch,
  StyleSheet,
  Modal,
  TextInput,
} from "react-native";
import io from "socket.io-client";

export default class URT extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const socket = io("http://192.168.1.5:3005");
  }

  render() {
    const [isSwitchEnabled, setSwitch] = React.useState(true);
    const [isModalVisible, setModal] = React.useState(false);
    const [isReserveButtonVisible, setVisibilty] = useState(true);
    const [isCancelButtonVisible, setVisibilty2] = useState(false);
    return (
      <View>
        <Modal
          transparent={true}
          visible={isModalVisible}
          animationType="slide"
        >
          <View style={styles.modalView1}>
            <View style={styles.modalView2}>
              <Text>Please enter a password to reserve the unit </Text>
              <TextInput style={styles.modalInput} placeholder="e.g. 56426" />
              <Button
                title="Save"
                onPress={() => {
                  setSwitch(false), setModal(false), setVisibilty(false);
                  setVisibilty2(true),
                    setTimeout(() => {
                      setSwitch(true), setModal(false), setVisibilty(true);
                      setVisibilty2(false),
                        Alert.alert(
                          "Unfortunately the reservation time ran out and no vehicle has arrived at the station so the reservation was cancelled."
                        );
                    }, 20000);
                }}
              />
              <Button
                title="Cancel"
                onPress={() => {
                  setModal(false);
                }}
              />
            </View>
          </View>
        </Modal>
        <Text>{props.title}</Text>
        <>
          {isReserveButtonVisible ? (
            <Button
              title="Click here to reserve"
              visible={isReserveButtonVisible}
              onPress={() => {
                Alert.alert(
                  "Please be noted that the unit is reserved for the next hour only ",
                  ".",
                  [
                    {
                      text: "Reserve",
                      onPress: () => {
                        setModal(true);
                      },
                    },
                    { text: "Cancel" },
                  ]
                );
              }}
            />
          ) : null}
          {isCancelButtonVisible ? (
            <Button
              title="Click here to cancel"
              visible={isCancelButtonVisible}
              onPress={() => {
                Alert.alert(
                  "Please be noted that now you are canceling your reservation",
                  ".",
                  [
                    {
                      text: "Yes",
                      onPress: () => {
                        setSwitch(true), setVisibilty(true);
                        setVisibilty2(false);
                      },
                    },
                    { text: "No" },
                  ]
                );
              }}
            />
          ) : null}
        </>
        <Switch value={isSwitchEnabled} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  modalView1: {
    backgroundColor: "#000000aa",
    flex: 1,
  },
  modalView2: {
    backgroundColor: "#ffffff",
    margin: 50,
    padding: 40,
    borderRadius: 10,
    alignItems: "center",
  },
  modalInput: {
    borderWidth: 1,
    borderColor: "#777",
    padding: 8,
    margin: 10,
    width: 200,
  },
});

Я думаю, что моя проблема может быть из-за места конструктивных функций, но я на 100% не уверен в этом

кто-нибудь может сказать мне, где проблема и как ее решить ??

заранее спасибо

1 Ответ

0 голосов
/ 10 июля 2020
Крючки

работают только с функциональным компонентом . измените export default class URT extends Component { на export default function URT() {, а также удалите constructor и componentDidMount. вы можете использовать хуки для извлечения данных. или удалите крючки из компонента класса, и вы можете управлять локальными состояниями, например 

constructor(props){
  scuper(props);
  this.state = {
    isSwitchEnabled: false;
  }
}
...