React-Redux表单清除后无法再次提交更新状态的问题解决

Hey, let's break down what's going wrong here and fix it step by step!

Core Issues in Your Code #

1. Broken State Structure: Your initial state defines user as an array, but your reducer is overwriting it with an object in every action case. This completely destroys the array structure you need to store multiple users.
2. No User Addition Logic: Your showUser method only alerts the current form values—it doesn't actually add the user to the array.
3. Misaligned Reset Logic: You're modifying the state directly instead of separating the "current editing user" from the saved user list.

Step-by-Step Fix #

Let's restructure your Redux setup to properly handle a list of users and a temporary form state.

1. Update Actions (actions.js)

Add new actions to handle adding users and resetting the form:

export const SET_FIRSTNAME = 'SET_FIRSTNAME';
export const SET_LASTNAME = 'SET_LASTNAME';
export const SET_EMAILID = 'SET_EMAILID';
export const SET_IBAN = 'SET_IBAN';
export const SET_BANKNAME = 'SET_BANKNAME';
export const ADD_USER = 'ADD_USER';
export const RESET_CURRENT_USER = 'RESET_CURRENT_USER';

export function setFirstName(firstname){
  return { type:SET_FIRSTNAME, payload:firstname }
}

export function setLastName(lastname){
  return { type:SET_LASTNAME, payload:lastname }
}

export function setEmailId(emailid){
  return { type:SET_EMAILID, payload:emailid }
}

export function setIban(iban){
  return { type:SET_IBAN, payload:iban }
}

export function setBankName(bankname){
  return { type:SET_BANKNAME, payload:bankname }
}

export function addUser(){
  return { type:ADD_USER }
}

export function resetCurrentUser(){
  return { type:RESET_CURRENT_USER }
}

2. Fix the Reducer (reducer.js)

Split state into users (saved user array) and currentUser (temporary form state), and fix the state update logic:

const initialState = {
  users: [], // Stores all submitted users
  currentUser: {
    firstname: '',
    lastname: '',
    emailid: '',
    iban: '',
    bankname: ''
  }
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_FIRSTNAME':{
      return {
        ...state,
        currentUser: { ...state.currentUser, firstname: action.payload }
      }
    }
    case 'SET_LASTNAME':{
      return {
        ...state,
        currentUser: { ...state.currentUser, lastname: action.payload }
      }
    }
    case 'SET_EMAILID':{
      return {
        ...state,
        currentUser: { ...state.currentUser, emailid: action.payload }
      }
    }
    case 'SET_IBAN':{
      return {
        ...state,
        currentUser: { ...state.currentUser, iban: action.payload }
      }
    }
    case 'SET_BANKNAME':{
      return {
        ...state,
        currentUser: { ...state.currentUser, bankname: action.payload }
      }
    }
    case 'ADD_USER':{
      return {
        ...state,
        users: [...state.users, { ...state.currentUser }], // Add current user to the array
        currentUser: initialState.currentUser // Optional: Clear form after submission
      }
    }
    case 'RESET_CURRENT_USER':{
      return {
        ...state,
        currentUser: initialState.currentUser
      }
    }
    default: return state;
  }
}

export default userReducer;

3. Update the Form Component (form.js)

Modify the component to use the new state structure and trigger user addition:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as action from '../actions/actions';
import './form.css';

class Form extends Component {
  constructor(props) {
    super(props);
    this.setFirstName = this.setFirstName.bind(this);
    this.setLastName = this.setLastName.bind(this);
    this.setEmailId = this.setEmailId.bind(this);
    this.setIban = this.setIban.bind(this);
    this.setBankName = this.setBankName.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.reset = this.reset.bind(this);
  }

  setFirstName(event) {
    this.props.dispatch(action.setFirstName(event.target.value));
  }

  setLastName(event) {
    this.props.dispatch(action.setLastName(event.target.value));
  }

  setEmailId(event) {
    this.props.dispatch(action.setEmailId(event.target.value));
  }

  setIban(event) {
    this.props.dispatch(action.setIban(event.target.value));
  }

  setBankName(event) {
    this.props.dispatch(action.setBankName(event.target.value));
  }

  handleSubmit(){
    // Add the current user to the saved list
    this.props.dispatch(action.addUser());
    // Show all saved users in the alert
    alert(JSON.stringify(this.props.users));
    // Reset the form after submission
    this.reset();
  }

  reset(){
    this.props.dispatch(action.resetCurrentUser());
  }

  render(){
    return(
      <div>
        <div id="center">
          <form>
            <div className="form-group">
              <label htmlFor="firstname">First Name:</label>
              <input type="text" className="form-control" id="firstname" value={this.props.currentUser.firstname} onChange={this.setFirstName} required/>
            </div>
            <div className="form-group">
              <label htmlFor="lastname">Last Name:</label>
              <input type="text" className="form-control" id="lastname" value={this.props.currentUser.lastname} onChange={this.setLastName} required/>
            </div>
            <div className="form-group">
              <label htmlFor="email">Email address:</label>
              <input type="email" className="form-control" id="email" value={this.props.currentUser.emailid} onChange={this.setEmailId} required/>
            </div>
            <div className="form-group">
              <label htmlFor="bankacc">IBAN:</label>
              <div id="deletebank" className="items">
                <input type="text" className="form-control" id="bankacc" value={this.props.currentUser.iban} onChange={this.setIban} required/>
                <button type="button" className="btn btn-default btn-sm">
                  <span className="glyphicon glyphicon-trash"></span>
                </button>
              </div>
            </div>
            <div className="form-group">
              <label htmlFor="bankname">Bank Name:</label>
              <input type="text" className="form-control" id="bankname" value={this.props.currentUser.bankname} onChange={this.setBankName} required/>
            </div>
            <div className="form-group">
              <div id="buttons" className="items">
                <button type="button" className="btn btn-warning" onClick={this.reset}>Clear Input</button>
                <button type="button" className="btn btn-success" onClick={this.handleSubmit}>Submit</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    )
  }
}

const mapStateToProps = store => {
  return {
    currentUser: store.user.currentUser,
    users: store.user.users
  }
}

export default connect(mapStateToProps)(Form);

Key Improvements #

• Separated users (saved list) and currentUser (form state) to avoid confusion
• Added ADD_USER action to push new users into the array
• Reset only clears the temporary form state, not the saved users
• Fixed reducer logic to preserve the array structure for saved users

内容的提问来源于stack exchange，提问作者stone rock