将表单中提交的数据与reactjs中json文件中的数据进行比较

Question

用于比较 json 文件中的数据与 reactjs 中提交表单中的数据的代码...我的程序是一个登录页面..我想比较提交的数据json 文件中的数据..数据是用户名和密码...请帮助我..

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';
import logindetls from '../../logindet.json';

class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.onSubmit = this.onSubmit.bind(this);
  }

  render() {
    let {username, password} = this.state;
    let {isLoginPending, isLoginSuccess, loginError} = this.props;

    return (

      <form name="loginForm" onSubmit={this.onSubmit}>
        <div className="form-group-collection">
          <div className="form-group">
            <label>Username/User ID:</label>
            <input name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
          </div>

          <div className="form-group">
            <label>Password:</label>
            <input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
          </div>
        </div>


        <input type="submit" value="Login" />

        <div className="message">
          { isLoginPending && <div className= "loader"></div>
                          }
          { isLoginSuccess && alert("Successfully Logged in...") }
          { loginError && alert(loginError.message) }
        </div>
      </form>
    )
  }






  onSubmit(e) {
    e.preventDefault();
    let { username, password } = this.state;
    this.props.login(username, password);
    this.setState({
      username: '',
      password: ''
    });
  }
}


const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => dispatch(login(username, password))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

这是我的登录表单页面

import logindetls from '../../logindet.json';

const SET_LOGIN_PENDING = 'SET_LOGIN_PENDING';
const SET_LOGIN_SUCCESS = 'SET_LOGIN_SUCCESS';
const SET_LOGIN_ERROR = 'SET_LOGIN_ERROR';

export function login(username, password) {
  return dispatch => {
    dispatch(setLoginPending(true));
    dispatch(setLoginSuccess(false));
    dispatch(setLoginError(null));

    callLoginApi(username, password, error => {
      dispatch(setLoginPending(false));
      if (!error) {
        dispatch(setLoginSuccess(true));
      } else {
        dispatch(setLoginError(error));
      }
    });
  }
}

function setLoginPending(isLoginPending) {
  return {
    type: SET_LOGIN_PENDING,
    isLoginPending
  };
}

function setLoginSuccess(isLoginSuccess) {
  return {
    type: SET_LOGIN_SUCCESS,
    isLoginSuccess
  };
}

function setLoginError(loginError) {
  return {
    type: SET_LOGIN_ERROR,
    loginError
  }
}

function callLoginApi(username, password, callback) {
  setTimeout(() => {

    if (username==logindetls.username && password==logindetls.password)
        {
        return callback(null);
    } else {
      return callback(new Error('Invalid username and password'));
    }
  }, 1000);
}


export default function reducer(state = {
  isLoginSuccess: false,
  isLoginPending: false,
  loginError: null
}, action) {
  switch (action.type) {
    case SET_LOGIN_PENDING:
      return Object.assign({}, state, {
        isLoginPending: action.isLoginPending
      });

    case SET_LOGIN_SUCCESS:
      return Object.assign({}, state, {
        isLoginSuccess: action.isLoginSuccess
      });

    case SET_LOGIN_ERROR:
      return Object.assign({}, state, {
        loginError: action.loginError
      });

    default:
      return state;
  }
}

这是我的 reducer 页面...我想做的所有更改...我的 json 页面是

const logindetls = [
  {
    "username": "admin",
    "password": "password"
   }
];

Answer 1

您可以使用 json-server npm 包。使用 json-server 你可以创建假的 rest api 并观看 json 文件。他们有非常清楚的文档如何制作。

编辑
使用 json-server 喜欢

观看您的文件

json-server --watch <your json file name her> --port <port number>

例如

json-server --watch db.json --port 8081

它将创建一个假的 rest api 服务器，它将监听 localhost:8081 then make call to the link using Fetch api 从你这样的 redux 动作中

export function selectedNews(id) {
const URL = "http://localhost:8081"
const request = fetch(`${URL}/user? 
      username=${username}&password=${password}`, {
      method: 'GET'
      }).then(res => res.json())

    return {
        type: <put your reducer type here>,
        payload: request
    }
}

如果在 db.json 中找到用户名和密码，请求变量的值将是这些用户名和密码。否则未定义。

Answer 2

我不确定你想要什么，但根据我的理解。

在 LoginForm 的 .json 文件中添加导出为

export const logindetls = [
  {
    "username": "admin",
    "password": "password"
  }
];

然后您可以简单地导入 .json 文件

import { logindetls } from './[filename].json' //Here you need to give the file name.

并且在 onSubmit 函数中你可以比较为

console.log(this.state.username === logindetls[0].username)

将表单中提交的数据与reactjs中json文件中的数据进行比较

Compare the data submitted in the form with data in json file in reactjs

javascript

reactjs

redux-form