javascript - mapStateToprops 被调用两次并在最后返回一个空数组

Question

我正在尝试使用 redux 将员工数据存储在商店中，但是当我尝试使用 mapStateToProps 访问商店时，它返回空数组，并且被调用两次。第一次状态有值，但第二次当我检查它时它会返回空数组

reducer /索引，js:

    import { AppConstants } from '../constants/actionTypes'
       const initialState = {
          employeeDetails: []
        };
        const rootReducer = (state = initialState, action) => {
        switch (action.type) {

          case AppConstants.ADD_EMPLOYEE:
              let emplData = state.employeeDetails
              let data = [
                   ...emplData.slice(0, action.index),
                   action.payload,
                  ...emplData.slice(action.index)
                   ]
            return  {...state,
                  employeeDetails: data
                  }
          default:
                 return state
          }
       }
    export default rootReducer;

employee.js:

    import React, { Component } from 'react';
     import Input from '../components/Input'
     import Button from '../components/Button'
     import { addEmployee } from '../actions/index'
      import { connect } from "react-redux";
     class EmployeeForm extends Component {
         constructor(props) {
              super(props);
              this.state = {
               employee: [],
               empName: "",
               empId: "",
               emailId: "",
               empAge: "",

              }
            }


handleChange = (evt) => {
    this.setState({
        [evt.target.name]: evt.target.value
    });

}
handleFormSubmit = () => {
    debugger;
    let employDet = {
        empName: this.state.empName,
        empId: this.state.empId,
        emailId: this.state.emailId,
        empAge: this.state.empAge
    }
    this.props.dispatch(addEmployee(employDet))

}

handleClearForm = () => {

}
handleDelete = (e) => {

}

render() {
    debugger
    let employeeDetails= this.props.employeeDetails
    console.log("in render "+this.props.employeeDetails)
    return (
        <div>
            <form className="container-fluid" >
                <Input
                    inputType={"text"}
                    title={"Full Name"}
                    name={"empName"}
                    value={this.state.empName}
                    placeholder={"Enter your name"}
                    handleChange={this.handleChange}
                />{" "}

                <Input
                    inputType={"text"}
                    title={"Email Id"}
                    name={"emailId"}
                    value={this.state.emailId}
                    placeholder={"Enter your Email Id"}
                    handleChange={this.handleChange}
                />{" "}

                <Input
                    inputType={"text"}
                    title={"Employee Id"}
                    name={"empId"}
                    value={this.state.empId}
                    placeholder={"Enter your Employee Id"}
                    handleChange={this.handleChange}
                />{" "}
                <Input
                    inputType={"number"}
                    name={"empAge"}
                    title={"Age"}
                    value={this.state.empAge}
                    placeholder={"Enter your age"}
                    handleChange={this.handleChange}
                />{" "}


                <Button
                    action={this.handleFormSubmit}
                    type={"primary"}
                    title={"Submit"}
                    className="buttonStyle"
                />{" "}

                <Button
                    action={this.handleClearForm}
                    type={"secondary"}
                    title={"Clear"}
                    className="buttonStyle"
                />{" "}

            </form>
            <br />

            <table border="1" style={{ width: 400, paddingTop: 5 }}>
                <thead>
                    <tr>
                        <th>Employee Name</th>
                        <th>Employee Id</th>
                        <th>Email Id</th>
                        <th>Age</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    {employeeDetails.map((emp, i) => {
                        return (
                            <tr key={i}>
                                <td>{emp.empName}</td>
                                <td>{emp.empId}</td>
                                <td>{emp.emailId}</td>
                                <td>{emp.empAge}</td>
                                {/* <td>
                                    <button onClick={this.handleEdit} id={emp.id}>
                                        Edit
                </button>
                                </td> */}
                                <td>
                                    <button onClick={this.handleDelete} id={emp.emailId}>
                                        Delete
                </button>
                                </td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        </div>
    )
}
}

     const mapStateToProps = state => {

         const { employeeDetails } = state

          return {
               employeeDetails: employeeDetails
          }

         };
        export default connect(mapStateToProps)(EmployeeForm)

store.js:

 import { createStore, combineReducers, applyMiddleware } from 
 'redux';
 import rootReducer from './reducers/index';
 import thunk from 'redux-thunk';

 const store  = createStore(rootReducer,
                        applyMiddleware(thunk));

 export default store;

action/index.js:

   import {AppConstants} from '../constants/actionTypes'


   export const addEmployee = (empData) => {

         return dispatch => {
           dispatch({ type: AppConstants.ADD_EMPLOYEE, 
           payload: empData
         })
      }
   };

**ActionType.js **

   export const AppConstants = {
        ADD_EMPLOYEE : "ADD_EMPLOYEE",
    }

Answer 1

主要问题是您正在使用表单提交按钮。提交按钮的标准行为是提交表单并重新加载浏览器。在单页应用程序中重新加载会从头开始重新启动应用程序，因此您无法使用此标准提交按钮行为。不要使用提交按钮，例如将按钮类型更改为“按钮”:

 <button type={'button'} onClick={this.handleFormSubmit}>Submit</button>

第二个问题可能出在您的 reducer 中。当您在 state.employeeDetails 上调用 Push 时，您正在改变它。尝试使用不可变操作插入/推送新项目，redux 在文档中有一些关于该问题的主题:

https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#inserting-and-removing-items-in-arrays

编辑:

在建议的 redux 更新模式的实现中，您将在特定索引处插入(但您的操作现在不发送索引)。当您只想将项目添加到末尾(如推送，但不可变)时，您可以使用数组扩展运算符:

let data = [
  ...emplData,
  action.payload
]