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

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（动作创建者）将数据 post 发送到 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);
}

这里是相关的reducer：

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: 'test'}，这表明我的后端没有从我的表单中获取数据。 IE。如果我将 username 键入 abc，我应该返回 abctest，而不是 test。

我哪里错了？

Answer 1

似乎使用了方法GET来提交表单。这就是 $_POST['username'] 结果为空的原因。所以你应该使用方法 POST 并从 $_POST['password'] 而不是 $_GET['password'] 获取密码。

Answer 2

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

Answer 3

我完全忘记了这个问题！

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

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

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

Unable to retrieve POST values in php when submitting react/redux form

php

reactjs

redux

redux-form