如何从 React Native 中的 TextField 获取值，由于空值导致无法将数据存储到数据库

Posted 2023-02-27

【中文标题】如何从 React Native 中的 TextField 获取值，由于空值导致无法将数据存储到数据库

【英文标题】：How to get value from TextField in React Native, Unable to store data to database caused by null value

【发布时间】：2019-12-20 14:45:01

【问题描述】：

我在 2 个月内一直致力于 react native 和 laravel，到目前为止一切顺利。但是当我尝试在 react native 中使用 post 方法时，我被卡住了。我用反应原生材料的文本字段制作了一个简单的表单。我知道应用程序已经与我的后端连接，但是当我想存储数据时，它显示了一个关于列不应该为空的错误，即使我已经插入了值。

我已经检查了 onChange 和值本身，以及我声明的 post 方法。这是我的构造函数、文本字段和提交按钮的 onPress

这是我的构造函数：

constructor()
        super();
        this.state = 
            Ketua: '',
        Level: '',
        
    

这是文本字段：

                <TextField
                    label = 'Ketua Kegiatan'
                    onChange=(data) =>  this.setState(Ketua:data.target.value) 
                    value = this.state.Ketua
                />

                <TextField
                    label = 'Laboratorium'
                    onChange=(data) =>  this.setState(lab:data.target.value) 
                    value = this.state.lab
                />

                <TextField
                    label = 'Level'
                    onChange=(data) =>  this.setState(level:data.target.value) 
                    value = this.state.level
                />

这是我的提交方法：

submit()
        let url = "http:/IP:Localhost/api/pinjams";
        let data = this.state;
        fetch(url,
            method:'POST',
            headers:
                "Content-Type" : "application/json",
                "Accept" : "application/json"
            ,
            body: JSON.stringify(data)
        )
        .then((result) => 
            result.json().then((resp) => 
                console.warn("resp", resp)
                alert("Data is Submitted")
            )
        )
     

还有，这是我的提交按钮

<Button
                    style=fontSize:20, color:'orange'
                    styleDisabled=color:'grey'
                    onPress=()=>this.submit()
                    > "\n" Submit
                </Button>

但这是错误消息：

resp, Object 
  "exception": "Illuminate\\Database\\QueryException",
  "file": "C:\\xampp\\htdocs\\coba_api_laravel\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php",
  "line": 664,
  "message": "SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'ketua_kegiatan' cannot be null (SQL: insert into `tb_peminjaman_mhs` (`ketua_kegiatan`, `lab`, `level`) values (?, ?, ?))",

如果有人能帮我解决这个错误，我会非常感谢:)

【问题讨论】：

在获取之前，当你做let data = this.state;时尝试打印data。

试试这个onChangeText=(Ketua) => this.setState(Ketua)，其他的都一样。

你检查过post-man的正常操作了吗？

非常感谢你们的解决方案！我试试看

【参考方案1】：

我想出了如何解决我的问题，我认为这是因为在构造函数状态下，我们需要安排与数据库中相同的变量行，并将 onChange 中的变量名称与数据库中的列匹配。我的意思是尝试将您要使用的变量与数据库中的列名相匹配。非常感谢您帮助我！