Question

我正在构建一个使用PHP作为后端的React + Redux应用程序。我有一个简单的登录表单如下：

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
import {loginUser} from '../actions/index';

class LoginForm extends Component {

    render() {
        const {fields: {username, password}, handleSubmit} = this.props;
        return (
            <form onSubmit={handleSubmit(this.props.loginUser)}>
                <input
                    type="string"
                    placeholder="username"
                    {...username}
                />
                <input
                    type="password"
                    placeholder="password"
                    {...password}
                />
                <input
                    type="submit"
                />
            </form>
        );
    }
}

export default reduxForm({
    form: 'Login',
    fields:['username', 'password']
}, null, {loginUser})(LoginForm);

我正在使用redux-form来管理表单数据处理。我使用loginForm（一个动作创建者）将数据发布到php后端，如下所示：

export function loginUser(props) {
    console.log('props', props);
    const request = axios.post(LOGIN_PAGE, props);
    return {
        type: LOGIN_USER,
        payload: request
    }
}

console.log正确显示登录表单中的所有数据。

这是我的PHP后端：

if (!is_user_logged_in()) {
    $username = $_POST['username'];
    $username = $username . 'test';
    $password = $_GET['password'];
    $response = array(
        'username' => $username
    );
    wp_send_json($response);
}

以下是相关的缩减器：

export default function(state = INITIAL_STATE, action) {
    switch(action.type) {
        case LOGIN_USER:
            console.log('reducer', action.payload.data);
            return {
                ...state,
                statusCode:action.payload.data,
                user:action.payload.data
            }
    }
    return state;
}

当我记录action.payload.data时，我会收到{username：＆＃39; test＆＃39;}，从而表明我的后端没有从我的表单中获取数据。即如果我输入username作为abc，我应该回到abctest，而不是测试。

我哪里错了？

Answer 1

似乎方法GET用于表单提交。这就是$_POST['username']导致null的原因。因此，您应该使用方法POST并从$_POST['password']而不是$_GET['password']获取密码。

Answer 2

我完全忘记了这个问题！

表单正在向后端发送JSON，以下是检索它的方法：

$inputJSON = file_get_contents('php://input');
$input = json_decode( $inputJSON, TRUE ); //convert JSON into array
$username = $input['username'];

Answer 3

可能How to retrieve Request Payload将帮助您检索PHP中提交的frim反应值。

提交react / redux表单时无法在php中检索POST值

3 个答案: