1

我一直在尝试将我的身份验证表单提交给减速器 3 天，我搜索并阅读了我能找到的所有内容，我找到了句柄更改的部分答案，但无法弄清楚如何执行句柄提交功能，我看到了如何其他人已经做到了，但没有一个与我的相似，请指导我如何找到我的解决方案，这是我在减速器之前的代码：

import React, {createContext, useState} from 'react';
import axios from "axios";

export const SignInContext = createContext();

const SignInContextProvider = (props) => {

    const [formData, setFormData] = useState({

        email: '',
        password: '',

        error: '',
        success: false
    })

    const {email, password, error, success} = formData;


    const clickSubmit = async event => {
        event.preventDefault()

        setFormData({...formData})

        await axios.interceptors.response.use((response) => {
            // do something with the response data
            // console.log('Response was received');

            return response;
        }, error => {
            // handle the response error
            // console.log(error.response.data.message)
            setFormData({...formData, error: error.response.data.message, success: false})
            return Promise.reject(error.response.data.message);
        });


        await axios({
            method: 'post',
            url: 'http://localhost:5001/api/user/signin',
            data: {email, password}
        })
            .then((response) => {
                    console.log(response);
                    if (response.data.status===200) {
                        setFormData({...formData, success: response.data.message});
                        localStorage.setItem('myData', response.data.token);
                        localStorage.setItem('type', response.data.type);
                    }
                    else {
                        setFormData({...formData, error: response.data.message, success: false});
                    }
                },
                (error) => (
                    console.log(error),
                        setFormData({...formData, error: error, success: false})
                ));

    }

    const handleChange = name => event => {
        setFormData({...formData, error: false, [name]: event.target.value})
    };

    const showError = () => (
        <div>
            <div className="alert alert-danger text-center" style={{display: error ? '' : 'none'}}>
                {error}
            </div>
        </div>
    );

    const showSuccess = () => (
        <div className="alert alert-success text-center" style={{display: formData.success ? '' : 'none'}}>
            {success}
        </div>
    );

    return (
        <SignInContext.Provider value={{ ...formData, clickSubmit, handleChange, showError, showSuccess }}>
            {props.children}
        </SignInContext.Provider>
    );
};

export default SignInContextProvider;

这是手柄更换减速器：

export const signInReducer = (state, {field, value}) => {
    return [...state, {
        [field]: value
    }]
}

这是我的减速器手柄更改方法：

const initialState = {

    email: '',
    password: '',

    error: '',
    success: false
};

const {email, password, error, success} = signInData;

const handleChange = e => {
    dispatch({ field: e.target.name, value: e.target.value })
}

我不是在寻找解决方案，但我厌倦了 3 天没有找到方法，我需要继续前进，请指导我

4

1 回答 1

0

感谢@Tim Ermilov

import React, { createContext, useReducer } from 'react';
import axios from 'axios';

export const SignInContext = createContext();

const initialState = {
  formData: {
    email: '',
    password: '',
  },
  error: '',
  success: false
};

function reducer(state, action) {
  switch (action.type) {
    case 'save':
      return { ...action.payload };
    case 'error':
      // TODO: do something with error
      return { ...action.payload };
    case 'success':
        return { ...action.payload };
    case 'change':
      return { ...state, formData: action.payload.formData };
    default:
      throw new Error();
  }
}

const SignInContextProvider = props => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const { email, password, error, success } = state;

  const clickSubmit = async event => {
    event.preventDefault();

    dispatch({ type: 'save', payload: formData });

    await axios.interceptors.response.use(
      response => {
        // do something with the response data
        // console.log('Response was received');

        return response;
      },
      error => {
        // handle the response error
        // console.log(error.response.data.message)
        dispatch({
          type: 'error',
          payload: {
            formData,
            error: error.response.data.message,
            success: false
          }
        });
        return Promise.reject(error.response.data.message);
      }
    );

    await axios({
      method: 'post',
      url: 'http://localhost:5001/api/user/signin',
      data: { email, password }
    }).then(
      response => {
        console.log(response);
        if (response.data.status === 200) {
          dispatch({type: 'success', payload: {...formData, success: response.data.message }});
          localStorage.setItem('myData', response.data.token);
          localStorage.setItem('type', response.data.type);
        } else {
          dispatch({
            type: 'error',
            payload: {
            formData,
            error: response.data.message,
            success: false
            }
          });
        }
      },
      error => (
        console.log(error),
        dispatch({type: 'error', payload: { formData, error: error, success: false } })
      )
    );
  };

  const handleChange = name => event => {
    dispatch({type: 'change', payload: formData }});
  };

  const showError = () => (
    <div>
      <div
        className="alert alert-danger text-center"
        style={{ display: error ? '' : 'none' }}
      >
        {error}
      </div>
    </div>
  );

  const showSuccess = () => (
    <div
      className="alert alert-success text-center"
      style={{ display: formData.success ? '' : 'none' }}
    >
      {success}
    </div>
  );

  return (
    <SignInContext.Provider
      value={{ ...formData, clickSubmit, handleChange, showError, showSuccess }}
    >
      {props.children}
    </SignInContext.Provider>
  );
};

export default SignInContextProvider;
于 2020-03-05T23:57:00.470 回答