Question

我已经提交了一份提交表格。我创建了userReducer，其中user[]是数组，每个数组元素都有firstname，lastname，emailid等。当我点击提交按钮时，它会显示数组元素[0]但是当我点击清除按钮并再次尝试填写表单并尝试提交没有再次添加用户，即没有状态更新。如何解决这个问题？

表单组件（form.js）：

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.showUser = this.showUser.bind(this);
    this.reset = this.reset.bind(this);

     console.log(this.props);

    }

    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));
    }

    showUser(){
        const jsonobj = this.props;
        alert(JSON.stringify(jsonobj));
    }

    reset(){
        this.props.dispatch(action.setFirstName(''));
        this.props.dispatch(action.setLastName(''));
        this.props.dispatch(action.setEmailId(''));
        this.props.dispatch(action.setIban(''));
        this.props.dispatch(action.setBankName(''));
    }


  render(){
    return(
      <div>
          <div id="center">
              <form>
                    <div className="form-group">
                         <label htmlFor="firstname">First Name:</label>
                         <input type="firstname" className="form-control" id="firstname" value={this.props.firstname} onChange={this.setFirstName} required/>
                    </div>

                    <div className="form-group">
                         <label htmlFor="lastname">Last Name:</label>
                         <input type="lastname" className="form-control" id="lastname" value={this.props.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.emailid} onChange={this.setEmailId} required/>
                    </div>

                    <div className="form-group">
                         <label htmlFor="bankacc">IBAN:</label>
                         <div id="deletebank" className="items">
                         <input type="bankacc" className="form-control" id="bankacc" value={this.props.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="bankname" className="form-control" id="bankname" value={this.props.bankname} onChange={this.setBankName} required/>
                    </div>

                    <div className="form-group">
                        <div id="buttons" className="items">
                            <button type="button" class="btn btn-warning" onClick={this.reset}>Clear Input</button>
                            <button type="button" className="btn btn-success" onClick={this.showUser}>Submit</button>
                        </div>
                    </div>


              </form>
          </div>
      </div>

    )}


}

const mapStateToProps = store => {
  return {
    firstname: store.user.firstname,
    lastname: store.user.lastname,
    emailid: store.user.emailid,
    iban: store.user.iban,
    bankname: store.user.bankname
  }
}

export default connect(mapStateToProps)(Form);

reducer.js：

const userReducer = (state = {
  user:[{
    firstname:'',
    lastname:'',
    emailid:'',
    bankaccounts:{
      iban:'',
      bankname:''
    }
  }]
  }, action) => {

  switch (action.type) {
    case 'SET_FIRSTNAME':{
      return {
        ...state,
        user:{...state.user, firstname: action.payload}
      }
    }

    case 'SET_LASTNAME':{
      return {
        ...state,
        user:{...state.user, lastname: action.payload}
      }
    }

    case 'SET_EMAILID':{
      return {
        ...state,
        user:{...state.user, emailid: action.payload}
      }
    }

    case 'SET_IBAN':{
      return {
        ...state,
        user:{...state.user, iban: action.payload}
      }
    }

    case 'SET_BANKNAME':{
      return {
        ...state,
        user:{...state.user, bankname: action.payload}
      }
    }
    default: return state;
  }

}

export default userReducer;

Actions.js：

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 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
    }
}

store.js：

import { createStore } from 'redux';

import userReducer from './reducers/reducers';


const store = createStore(userReducer);

store.subscribe(() => {
    console.log('Store changed', store.getState());
})

export default store;

截图：

Answer 1

这里有很多东西需要解决，但主要问题是你的状态期望user成为一个数组。我认为重命名这个users以免混淆是非常明智的：

（我将删除一些键以使其更容易）

const initialState = {
  users: [ // note "users" not "user"
    {
      firstname: '',
      lastname: '',
    },
  ],
};

您的reducer switch语句未指定应更新的WHICH用户。如果您只想从“添加”新用户开始，它可能看起来像这样：

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_USER": {
      return {
        ...state,
        users: [...state.users, action.payload],
      };
    }
    default:
      return state;
  }
};

我们以users的形式向action.payload数组添加一个新用户，其中应包含您希望用户使用的所有密钥。

您现在可以拥有一个更简洁的动作创建者

const addUser = user => ({
  type: 'ADD_USER',
  payload: user,
})

你的表格可以简化很多：

import * as actions from './actions'

class Form extends React.Component {
  state = {
    firstname: '',
    lastname: '',
  }

  render() {
    return (
      <form onSubmit={() => {
        this.props.dispatch(actions.addUser(this.state))
      }}>
        <input 
          value={this.state.firstname} 
          onChange={e => this.setState({ firstname: e.target.value })
        />
        <input 
          value={this.state.lastname} 
          onChange={e => this.setState({ lastname: e.target.value })
        />
      </form>
    )
  }
}

export default connect()(Form)

如何在react-redux中更新状态？

1 个答案: