Reactjs 如何使用组件中的本地状态更新redux状态

我在APP.js中有一个表单。提交表单后，我需要显示我在表单中输入的数据。在reducer函数中，在App.js中调度操作后，我尝试更新redux状态。我在这里出了问题，口吃了2个多小时。有人能帮忙吗

//App.js

import React,{Component} from 'react';
import {action1} from './Actions/action1'
import './App.css';
import {connect} from 'react-redux'
import Display from './Components/Display'

const mapDispatchToProps=(dispatch)=>{
   return{
   submitHandler:(details)=>dispatch(action1(details))
   }
}

class App extends Component {
constructor(){
  super();
  this.state={
    details: {FirstName:'', LastName:'', Age: ''} 
 }
}

nameHandler=(event)=>{
    const details = this.state.details;
    details[event.target.name]= event.target.value;
    this.setState({details});
}

SubmitHandler=(event)=>{
   event.preventDefault()
   /*
   const firstname=this.state.details.FirstName
   const lastname=this.state.details.LastName
   const age=this.state.details.Age
   */
   this.props.submitHandler(this.state.details)
}

  render(){
  return (
    <div className="App">
     <form onSubmit={this.SubmitHandler}>
                  <div className="form-group">
                    <input 
                     type="text"
                     placeholder="FirstName"
                     value={this.state.details.FirstName}
                     onChange={this.nameHandler}
                     className="form-control"
                     name="FirstName"
                     />
                     </div>

                     <div className="form-group">
                     <input
                       type="text"
                       placeholder="LastName"
                       value={this.state.details.LastName}
                       onChange={this.nameHandler}
                       className="form-control"
                       name="LastName"
                       />
                     </div>

                     <div className="form-group">
                       <input
                       type="text"
                       placeholder="Age"
                       value={this.state.details.Age}
                       onChange={this.nameHandler}
                       className="form-control"
                       name="Age"
                       />
                        </div>
                        <div className="form-group">
                       <button type="submit" className="btn btn-primary">Submit Form</button>
                       </div>
                </form>
                <Display/>
     </div>
  );
}
}

//我的减速机

import {SUBMISSION} from '../Constants/actiontypes'


const reducer1=(state=[],action)=>{

     if(action.type===SUBMISSION){

     return [...state,{firstname: action.payload.FirstName,lastname:action.payload.LastName,age:action.payload.Age}]; 

   } 


    return state

}

export default reducer1

我可以查看通过action.payload输入的值，但无法更新状态

返回[…状态，{firstname: action.payload.FirstName，lastname:action.payload.lastname，age:action.payload.age}

您返回的是一个数组make it object

return {
        ...state,
        firstname: action.payload.FirstName,
        lastname: action.payload.LastName,
age:action.payload.Age
      };

---

您确定您的nameHandler工作正常吗？它不是删除了旧的状态，并且在更新后只有一个字段详细信息吗？你能检查一下你的reducer吗？你返回的是数组而不是对象。你只是想在状态数组中添加新对象，对吗？或者您想更新现有的？@Dharmendra Makineni请显示您已初始化默认状态的配置存储，以便我们可以严格且一致地回答，但我已将状态初始化为空数组。我们必须返回一个数组，为什么我们需要返回对象？？？@DharmendraMakineni，将初始状态标记为

null

/空对象

{}

。

return {
        ...state,
        firstname: action.payload.FirstName,
        lastname: action.payload.LastName,
age:action.payload.Age
      };