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

我试图使用

redux

将员工数据存储在存储中，但当我尝试使用

mapstatetops

访问存储时，它返回的空数组被调用了两次。第一次状态有vaue，但第二次检查时它将返回空数组

减速机/索引，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)

操作/index.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;

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

---

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

提交

第二个问题可能在减速器中。当您调用push-on-state.employeeDetails时，您正在对其进行变异。尝试使用不可变操作插入/推送新项，redux在文档中有一些关于此问题的主题：

编辑：

在建议的redux更新模式的实现中，您正在特定索引处插入（但您的操作现在不发送索引）。如果只想将项添加到末尾（如推送，但不可变），可以使用数组排列运算符：

let数据=[
…数据，
行动.有效载荷
]

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

提交

第二个问题可能在减速器中。当您调用push-on-state.employeeDetails时，您正在对其进行变异。尝试使用不可变操作插入/推送新项，redux在文档中有一些关于此问题的主题：

编辑：

在建议的redux更新模式的实现中，您正在特定索引处插入（但您的操作现在不发送索引）。如果只想将项添加到末尾（如推送，但不可变），可以使用数组排列运算符：

let数据=[
…数据，
行动.有效载荷
]

请将您的代码格式化得更好：）请发布“/reducers/index”的源代码、操作创建者的代码以及“employee.js”的全部源代码。缺少这些部分来帮助您解决问题。请将代码的格式设置得更好：）请发布“/reducers/index”的源代码、操作创建者的代码以及“employee.js”的全部源代码。缺少这些部分来帮助您解决问题。我尝试了文档中使用的方法，但仍然存在问题。默认情况下，将调用reducer，并设置默认状态。我已经更新了reducer以供参考。我更新了我的答案，表单提交按钮出现问题。您好。非常感谢。这对我很有帮助。问题在于我尝试了文档中使用的方法，但仍然存在问题。默认情况下，将调用reducer，并设置默认状态。我已经更新了reducer以供参考。我更新了我的答案，表单提交按钮出现问题。您好。非常感谢。这对我很有帮助。问题在于