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

//组合减速器文件

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)

我无法显示我输入的值。

我正在获取名字：姓：年龄：

但不是它们的相应值。

Answer 1

我认为问题在于您在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
}

Answer 2

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

在DisplayList组件中，更改

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

到

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

在显示组件中，更改

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

到

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

以下是供您参考的codeandbox示例：

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

让我知道您是否需要任何帮助。

如何在Redux存储中显示更新状态

2 个答案: