reactjs - 如何使用 react 和 redux 提交表单？

Question

我正在尝试使用简单的 html 表单提交 POST 表单，并且我还将 redux 与 userAction 一起使用，它允许存储用户和 express js API 返回的令牌，但是当我提交表单时，提交不起作用，什么都没有发生我什至无法进入操作的获取功能。

import '../styles/ConnexionModal.css';
import { userLogin } from '../redux/userActions';
import { useState } from 'react';
// import { useSelector } from 'react-redux';

const ConnexionModal = ({ showModal, hideModal }) => {
    
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    // const message = useSelector(state => state.userReducer.message);
    // console.log(message);

    const handleChangeEmail = (event) => {
        setEmail(event.target.value);
    }

    const handleChangePassword = (event) => {
        setPassword(event.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        userLogin(email, password);
    }

    return (
        showModal && ( 
        <div className="modalBg">
            <div className="modalContainer">
                <div className="modalHeader">
                    <h1 className="modalTitle">Connexion</h1>
                </div>
                <div className="modalBody">
                    <form method="POST" onSubmit={handleSubmit}>
                        <div className="formGroup">
                            <label htmlFor="email" className="info">Email</label>
                            <input className="field" name="email" id="email" type="email" value={email} onChange={handleChangeEmail} autoFocus required />
                        </div>
                        <div className="formGroup">
                            <label htmlFor="password" className="info">Mot de passe</label>
                            <input className="field" name="password" id="password" type="password" value={password} onChange={handleChangePassword} required />
                        </div>
                        <div className="formGroup">
                            <label htmlFor="connexion" className="submitButton">Se connecter</label>
                            <input className="field submit" id="connexion" name="submit" type="submit" />
                        </div>
                    </form>
                </div>
                <div className="close">
                    <button onClick={() => hideModal()} className="closeButton">Fermer</button>
                </div>
            </div>
        </div>
        )
    )

}

export default ConnexionModal;

export const LOGIN = "LOGIN";
export const ERROR = "ERROR";

export const userLogin = (email, password) => {

    return async dispatch => {
        
        console.log('test');
        fetch('http://192.168.1.36:4000/api/users/login', {
            method: "POST",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                email: email,
                password: password
            })
        })
        .then((res) => res.json())
        .then(async (res) => {
            if(!res.error) {
                localStorage.setItem('auth', res.token);
                dispatch({ type: LOGIN, user: res.user, token: res.token });
            } else {
                dispatch({ type: ERROR, message: res.error });
            }
        })

    }

}

console.log ('test') 没有显示任何内容，这意味着我什至没有访问组件中的 userLogin 函数。

标签： reactjsformsreduxreact-reduxfetch

Answer 1

我假设您也在使用redux-thunk.

您应该始终将容器内的操作传递给redux 调度函数。例如

import '../styles/ConnexionModal.css';
import { userLogin } from '../redux/userActions';
import { useState } from 'react';
import { useDispatch } from 'react-redux';

const ConnexionModal = ({ showModal, hideModal }) => {
    const dispatch = useDispatch();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleChangeEmail = (event) => {
        setEmail(event.target.value);
    }

    const handleChangePassword = (event) => {
        setPassword(event.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        dispatch(userLogin(email, password));
    }

    ...