php - 在reactJS中如何避免使用表单返回空数据？还要检查后端代码，专家给我答案

Question

当我尝试通过 API 将数据键入 reactJs 表单时，控制台返回 null。

当我在后端 CodeIgniter 刷新页面时，它会以 null 的形式显示键值。

如何修复问题数据，以便在通过 reachJS 表单输入时控制台不返回 null。

例如，当我在浏览器中输入 http://localhost/API/UserController/users ，它在 reactJs 形式的每个响应中返回 null 如下:

{"user_id":"119","UserName":null,"user_email":null,"Password":null,"CreatedDate":"0000-00-00 00:00:00","Status":null,"Role":null,"VendorId":null}

当我 checkin 代码时 <强> http://localhost/API/UserController/insertUsers ，只有 insertUser Controller 返回 null。

任何有关该问题的意见都将不胜感激。
我的数据库代码是:

CREATE TABLE `users`(
    `user_id` int(11) NOT NULL,
    `UserName` varchar(255) DEFAULT NULL,
    `user_email` varchar(40) DEFAULT NULL,
    `Password` varchar(1000) DEFAULT NULL,
    `CreatedDate` datetime DEFAULT NULL,
    `Status` int(11) DEFAULT NULL
    `Role` varchar(255) DEFAULT NULL,
    `VendorId` int(11) DEFAULT NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

我在 CodeIgniter 中的 Usermodel 是:

class Usermodel extends CI_Model
{

public function get_users(){
    $query = $this->db->select("*")
              ->from("users")
              ->get();
    return $query;      
}
public function insert_users($data){
    $this->UserName = $data['UserName'];
    $this->user_email=$data['user_email'];
    $this->Password =$data['Password'];
    $this->CreatedDate=$data['CreatedDate'];
    $this->Status=$data['Status'];
    $this->Role = $data['Role'];
    $this->VendorId=$data['VendorId'];
    $this->db->insert("users",$this);
}
}

我在 insertUsers 方法中的 UserController Controller 是:

<?php 
defined('BASEPATH') OR exit('No direct script access allowed');
header('Access-Control-Allow-Origin: *');
if($_SERVER['REQUEST_METHOD']==='OPTIONS'){
    header('Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS');
    header('Access-Control-Allow-Headers:Content-Type');
    exit;
}
class UserController extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
        $this->load->model("usermodel","us");
    }
    public function users(){
        $query = $this->us->get_users();
        header("Content_Type:application/json");
        echo json_encode($query->result());
    }
    public function insertUsers(){
        $data = array(
            'UserName'      =>$this->input->post('UserName') ,
            'user_email'    =>$this->input->post('user_email'),
            'Password'      =>$this->input->post('Password'),
            'CreatedDate'   =>date("l jS \of F Y h:i:s A"),
            'Status'        =>$this->input->post('Status'),
            'Role'          => $this->input->post('Role'),
            'VendorId'      => $this->input->post('VendorId'), 
        );
        $query =$this->us->insert_users($data);
        header("Content_Type:application/json");
        echo json_encode($query);
    }
}

此外，我使用 reactJS 获取 API，当用户在表单中写入任何数据时，它会在响应 Register.js 中返回 null，如下所示:

import React, { Component } from 'react';
import { Button, Card, CardBody, CardFooter, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';

class Register extends Component {
  constructor(props){
    super(props);
    this.state = {
      user_id:'',  Username:'', Password:'', user_email:'',CreatedDate:'',Status:'',Role:'',VendorId:'',
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
    handleChange(event){
    const state = this.state;
    state[event.target.name] = event.target.value;
    this.setState(state, () => console.log(state));
    // console.log(state); state get undefined
    }  

handleSubmit(event){
    event.preventDefault();
    fetch('http://localhost/API/UserController/insertUsers',{
      method:'POST',
      headers:{
        'Content-Type':'application/json',
        'Accept':'application/json'
      },
      body:JSON.stringify({
        user_id :this.state.user_id,
        Username:this.state.Username,
        Password:this.state.Password,
        user_email:this.state.user_email,
        CreatedDate:this.state.CreatedDate,
        Status:this.state.Status,
        Role: this.state.Role,
        VendorId:this.state.VendorId,
      })
    })
      .then(res =>res.json() )
      .then(data => console.log(data))
      .catch(err => console.log("show me error that cannot be specify",err))
  }
  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="9" lg="7" xl="6">
              <Card className="mx-4">
                <CardBody className="p-4">
                  <Form action="http://localhost/API/UserController/users" method="post" onSubmit={this.handleSubmit}>
                    <h1>Register</h1>
                    <p className="text-muted">Create your account</p>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-user"></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input required  type="text" name="UserName" value={this.state.UserName} onChange={this.handleChange} placeholder="Username" autoComplete="username" name="Username"  />
                    </InputGroup>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>@</InputGroupText>
                      </InputGroupAddon>
                      <Input required  type="text" placeholder="User email" name="user_email" value={this.state.user_email} onChange={this.handleChange} autoComplete="email" />
                    </InputGroup>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-lock"></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input required  type="password" placeholder="Password" value={this.state.Password} onChange={this.handleChange} name="Password" autoComplete="new-password" />
                    </InputGroup>
                    <Button color="success" block>Create Account</Button>
                  </Form>
                </CardBody>
                <CardFooter className="p-4">
                  <Row>
                    <Col xs="12" sm="6">
                      <Button className="btn-facebook mb-1" block><span>facebook</span></Button>
                    </Col>
                    <Col xs="12" sm="6">
                      <Button className="btn-twitter mb-1" block><span>twitter</span></Button>
                    </Col>
                  </Row>
                </CardFooter>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Register;

Answer 1

当您在数据库上执行插入或更新等写入操作时，CodeIgniter 不会返回数据或结果集，而是返回一个 bool 值 (true/false)。因此，为什么你会得到 null，此处 $query 的值

$query = $this->us->insert_users($data);

如果操作成功则为真，否则为假。

使用 if 语句检查是否为真并返回 $data 而不是

echo json_encode($data);

您可以在此处查看 CI (CodeIgniter) 关于查询的文档 https://www.codeigniter.com/user_guide/database/queries.html

我还建议您使用加密算法来加密您的密码。