Question

我在APP.js中有一个表单。在提交表单后，我需要显示我在表单中输入的数据。在reducer函数中，在App.js中分派动作后，我试图更新redux状态。我在这里弄错了，停留了两个多小时。谁能帮忙吗？

// 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'

export const action1=(body)=>{
    console.log(body)
 return{
     type:SUBMISSION,
     payload:body
 }

}

//我的减速器

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输入的值，但是无法更新状态

Answer 1

返回[...状态，{名字： action.payload.FirstName，lastname：action.payload.LastName，age：action.payload.Age}];

您要返回一个数组使其成为对象。

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

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

1 个答案: