如何在 redux store 中显示更新后的状态

Question

我是 redux 的新手。我有一个表格，我需要打印表格中输入的数据。我正在通过本地状态更新 redux 状态，但无法通过 mapStateToProps 方法显示状态变量。

提前致谢

//App.js文件中的表单组件

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

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

class App extends Component {

  state={
    FirstName:'', 
    LastName:'', 
    Age: '' 
 }


nameHandler=(event)=>{

    this.setState({[event.target.name]:event.target.value});
}

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

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

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

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




export default connect(null,mapDispatchToProps) (App);

//动作组件

import {SUBMISSION} from '../Constants/actiontypes'
import uuidv4 from 'uuid/v4'

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

}

//reducer 组件 -->即使我只有一个动作，我也在使用组合 reducer

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

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

     if(action.type===SUBMISSION){

     return  [...state, action.payload];

   } 


    return state

}

export default reducer1

//合并reducer文件

import {combineReducers} from 'redux'
import Reducer1 from './reducer1'

const allreducers=combineReducers({details:Reducer1})
export default allreducers

//显示文件模板

const Display=({details:{firstname,lastname,age}})=>{

    return(
        <div >
            <h1>Firstname:{firstname}</h1>
            <h1>LastName:{lastname}</h1>
            <h1>Age:{age}</h1>
        </div>
    )
}

export default Display

//DisplayList 文件--> 我已经在这个文件中导入了Display.js（上图）文件。并通过这个文件传递值。最后我在我的 App.js 文件中导入了这个

import React from 'react'
import {connect} from 'react-redux'
import Display from './Display'

const mapStateToProps=(state)=>{
   return{
       details:state.details
   }
}

const List=({details})=>{
    console.log(details)
    return(
       <div>

      {details.map(de=>{
          console.log(de)
         return (
             <Display details={de} key ={de.id}/>
         )

      })}
      </div>
    )
}

export default connect(mapStateToProps,null)(List)

我无法显示我输入的值。

我得到了 FirstName ： 姓： 年龄：

但不是它们对应的值。

Answer 1

你几乎明白了！问题在于您传递给 Display 组件的内容以及您如何解构道具。进行这些更改，它应该可以工作。

1. 在 DisplayList 组件中，更改

<Display details={de} key={de.id}/> 

到

<Display details={de.body} key={de.id} />

1. 在显示组件中，更改

const Display=({details:{firstname,lastname,age}})

到

const Display = ({ details: { FirstName: firstname, LastName: lastname, Age: age }})

这是一个代码框示例供您参考：

https://codesandbox.io/s/reactredux-obsht

如果您需要任何帮助，请告诉我。

Answer 2

我认为问题在于您在reducer 中的初始状态，

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

在React 中，我们有状态object，但您初始化了array，例如state=[]。

您需要单独创建一个初始状态对象，例如，

const initialState = {
    details : []    //name it as `details`, because you are getting `state.details` in `DisplayList` component
}

现在您可以更新并返回您的状态，

const reducer1=(state=initialState, action)=>{

   if(action.type===SUBMISSION){
       return  {...state, details: [...state.details, action.payload] };
   } 

   return state
}