意外的令牌，预期在 onConfirm 中反应原生

Question

我正在尝试在我的 应用

道具

export default class App extends React.Component {  
constructor(props) {
    super(props);
    this.state = {
      cdate: '',
     setDate: '',
     isVisible: false,
     setVisible: false
    };
  }  

源代码

import React, { Component } from "react";
    import {
      View,
      ScrollView,
      DatePickerIOS,
      TouchableOpacity,
      Text,
      TextInput,
      Button,
      StyleSheet
    } from "react-native";
    import RBSheet from "react-native-raw-bottom-sheet";
    import data from "./static.json";

import DateTimePicker from 'react-native-modal-datetime-picker'; 


export default class App extends React.Component {

const { cdate, isVisible, setDate, setVisible } = this.state;

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textTitle}>REACT NATIVE RAW BOTTOMSHEET</Text>
        <View style={styles.buttonContainer}>

          <TouchableOpacity onPress={() => this.Scrollable.open()} style={styles.button}>
            <Text style={styles.buttonTitle}>SCROLLABLE</Text>
          </TouchableOpacity>     
        </View>

        {/* Grid Menu */}
        <RBSheet
          ref={ref => {
            this.Scrollable = ref;
          }}
          closeOnDragDown
          customStyles={{
            container: {
              borderTopLeftRadius: 10,
              borderTopRightRadius: 10
            }
          }}
        >
          <ScrollView>
            <View style={styles.gridContainer}>
             <DateTimePicker
  mode="time"
  isVisible={isVisible}
  cdate={cdate}
  onConfirm={cdate => {
    setDate(cdate.toTimeString());
    setVisible(false);
  }}
  onCancel={() => this.setState({ setVisible: false })}
/>
            </View>

          </ScrollView>
        </RBSheet>

      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  textTitle: {
    fontSize: 20,
    marginTop: 120
  },
  buttonContainer: {
    alignItems: "center",
    marginTop: 50
  },
  button: {
    width: 150,
    backgroundColor: "#4EB151",
    paddingVertical: 10,
    alignItems: "center",
    borderRadius: 3,
    margin: 10
  },

});

这是我遇到的错误

它应该是这样工作的

*****更新*****

我收到错误“SyntaxError:\App.js: Unexpected token (21:6)

19 |导出默认类 App 扩展 React.Component { 20 |

21 |常量 { cdate, isVisible, setDate, setVisible } = this.state; | ^ 22 | 23 |渲染（） { 24 | return ( at App.js:21:6 " 你能帮忙吗

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

Answer 1

试试这个：

const { cdate, isVisible, setDate, setVisible } = this.state;

<DateTimePicker
  mode="time"
  isVisible={isVisible}
  cdate={cdate}
  onConfirm={cdate => {
    setDate(cdate.toTimeString());
    setVisible(false);
  }}
  onCancel={() => this.setState({ setVisible: false })}
/>