Reactjs null不是react native中处于组件状态的对象

我正在尝试在我的应用程序中实现

源代码

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 {

 constructor (props) {
  super(props);
  this.state = {
     cdate: '',
     setDate: '',
     isVisible: false,
     setVisible: false,

  };

  render() {

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

    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
  },

});

import React，{Component}来自“React”；
进口{
看法
滚动视图，
DatePickerIOS，
可触摸不透明度，
文本，
文本输入，
按钮
样式表
}从“反应本族语”；
从“react native raw bottom sheet”导入RBSheet；
从“/static.json”导入数据；
从“反应本机模式日期时间选择器”导入日期时间选择器；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
cdate:“”，
设置日期：“”，
isVisible:false，
setVisible:false，
};
render（）{
const{cdate，isVisible，setDate，setVisible}=this.state；
返回(
反应天然原料底板
this.Scrollable.open（）}style={styles.button}>
可滚动
{/*网格菜单*/}
{
this.Scrollable=ref；
}}
关门
自定义样式={{
容器：{
borderTopLeftRadius:10，
BorderTopRight半径：10
}
}}
>
{
setDate（cdate.toTimeString（））；
setVisible（假）；
}}
onCancel={（）=>this.setState（{setVisible:false}）
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“中心”，
背景颜色：“F5FCFF”
},
文本标题：{
尺寸：20，
玛金托普：120
},
按钮容器：{
对齐项目：“中心”，
玛金托普：50
},
按钮：{
宽度：150，
背景色：“4EB151”，
填充垂直：10，
对齐项目：“中心”，
边界半径：3，
差额：10
},
});

这就是我得到的错误

意外标记，应为“；”（31:11）

29 |}；三十|

31 | render（）{ |^32 | 33 | const{cdate，isVisible，setDate，setVisible}=this.state

TypeError:null不是对象（计算“\u this$state.cdate”）组件状态对象：const{cdate，isVisible，setDate，setVisible}=this.state

这是因为您在render（）函数中正在分解并使用名为

this.state

的对象

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

您忘了声明上面的状态。请在组件中添加以下状态-

export default class App extends React.Component {
  //add other states too that you are using and assign them your initial values//
  this.state = {
    cdate: "",
    isVisible: "",
    setDate: "",
    setVisible: "",
  }

  render() {

---

这个错误说明你错过了一个很近的括号

constructor (props) {
      super(props);
      this.state = {
         cdate: '',
         setDate: '',
         isVisible: false,
         setVisible: false,

      }
  }  // here

  render() {

  ...

意外标记，预期“；”（31:11）29 |}；30 |>31 | render（）{^32 | 33 | const{cdate，isVisible，setDate，setVisible}=this.state；我收到这个错误（我更新了源代码）