使用 NodeJS 在 Reactjs 中将 FormData 传递给 Redux 注册函数时获取未定义

Question

我正在使用 redux 创建注册功能。 我已经设置了 store 和 reducer 以及function register() 。

但是，当我调用注册 api 的端点时，它只是不注册用户，并且从 redux 操作文件中，我的所有数据都未定义。

每当我进入我的 redux 开发工具时，我都会看到它说“需要名称”、“需要用户名”，这是我从我的 nodejs api 设置的后端验证，这意味着没有值到达 api 和我输入的所有内容未定义。 这是为什么？

我是 redux 的新手，所以我不知道如何调试问题或了解出了什么问题。

这是我的代码：

动作/auth.js 文件：

export const register = ({ name, uniID, username, email, phoneNumber, uniIDImage, password }) => async dispatch => {
 
    console.log(name, email, phoneNumber, uniIDImage, password);//logs undefined
    const body = JSON.stringify({ name, uniID, username, email, phoneNumber, uniIDImage, password });
    const emailBody = JSON.stringify({ name, email });

    try {
        const res = await axios.post('/register', body);

        dispatch({
            type: REGISTER_SUCCESS,
            payload: res.data
        });

    } catch (err) {
        dispatch({
            type:REGISTER_FAIL,
        });
    }

}

减速机/auth.js：

import {
    REGISTER_SUCCESS,
    REGISTER_FAIL,
} from "../actions/types";

const initialState = {
    token: localStorage.getItem('token'),
    isAuthenticated: null,
    loading: true,
    user: null
};

export default function (state = initialState, action) {

    const { type, payload } = action;

    switch (type) {
        case REGISTER_SUCCESS:
            localStorage.setItem('token', payload.token);
            return {
                ...state,
                ...payload,
                isAuthenticated: true,
                loading: false
            }
        case REGISTER_FAIL:
            localStorage.removeItem('token');
            return {
                ...state,
                token: null,
                isAuthenticated: false,
                loading: false
            }
        default:
            return state;
    }
}

注册.js：

import React, {useEffect, useReducer, useState} from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import axios from "axios"

import { register } from '../../actions/auth';

const Register = ({ register }) => {

  const [data, setData] = useState({
    name: '',
    uniID: '',
    username: '',
    email: '',
    phoneNumber: '',
    password: '',
  });

  const [uniIDImage, setUniIDImage] = useState([]);
  const [success, setSuccess] = useState(false);

  const handleChange = (e) => {
    setData({ ...data, [e.target.name]: e.target.value });
  }

  const handleImage = (e) => {
    e.persist()
    setUniIDImage({ pic: e.target.files[0] });
  }

  const onRegister = async (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append("name", data.name);
    formData.append("uniID", data.uniID);
    formData.append("username", data.username);
    formData.append("email", data.email);
    formData.append("phoneNumber", data.phoneNumber);
    formData.append("uniIDImage", uniIDImage.pic);
    formData.append("password", data.password);


    register({formData});
  }

Register.propTypes = {
  register: PropTypes.func.isRequired,
};

export default connect(null, {register})(Register);

Answer 1

您正在传递“formData”类型

 // this is correct
 register(formData);

但你像普通对象一样解构

export const register = ({ name, uniID, username, email, phoneNumber, uniIDImage, password }) => async dispatch => {

如果你检查这个mdn formData

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the values
for (const value of formData.values()) {
  console.log(value);
}

当您在register中收到formData时，将其转换为对象

export const register =(formData) => async(dispatch)=> {
  let jsonObject = {};
  for (let key of FormData.keys()) {
    jsonObject[key] = formData.get(key);
  }

  // in axios post jsonObject

  const res = await axios.post('/register', jsonObject);
};