mapStateToProps 不会改变状态

不会改变状态

关注

发信

关注(28)粉丝(399)

mapStateToProps 不会改变状态

本文介绍了mapStateToProps 不会改变状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 redux 的新手并想学习它，我想在成功登录后重定向到仪表板内容，这是我的代码:

class Dashboard extends Component {状态 = {记录:假};使成为() {const { 类} = this.props;console.log(this.state.logged)返回 (<div>{this.state.logged ?<div><p>你好</p>

: 登录()

)}}const mapStateToProps = (state, props) =>{返回 {记录:state.logged}}导出默认连接(mapStateToProps)(仪表板)

减速器:

const initialState = {登录: []，记录:假}函数 rootReducer(state = initialState, action) {开关(动作.类型){案例 VALIDATE_LOGIN:返回  {//记录:action.text.name == "a" &&action.text.password == "b" ?真假，...状态，记录:真实}默认:返回状态}}导出默认 rootReducer

为什么它不想改变仪表板的状态并呈现正确的内容?谢谢

在这里编辑我添加代码，我在那里发送我的减速器:登录:

class 登录扩展组件 {状态 = {名称: ""，密码: ""};handleLogin = () =>{this.props.LogIn(this.state)}使成为() {返回 (<div><排版变体="h3">登录表格</排版><表格><TextField label="name" onChange={el =>this.setState({name: el.target.value})}/><TextField label="password" type="password" onChange={el =>this.setState({password: el.target.value})}/><Button onClick={this.handleLogin}>登录</Button></表单>

);}}const dispatchToProps = dispatch =>{返回 {登录:登录 =>调度(登录(登录))}}导出默认连接(空，dispatchToProps)(登录)；

当我尝试控制台 log 登录 mapStateToProps 时，我可以看到 logging 已更改为 true，但遗憾的是在仪表板上没有可见效果.我的想法是，它可能在更改状态后不会重新渲染，但我不知道...

解决方案

更改

{this.state.logged ?<div><p>你好</p>

: 登录()

)}

与

{this.props.logged ?<div><p>你好</p>

: 登录()

)}

I'm new to redux and want to learn it, I want to make redirect to dashboard content after succesful login, here is my code:

class Dashboard extends Component {
  state = {
    logged: false
  };
render() {
    const { classes } = this.props;
    console.log(this.state.logged)

    return (
<div>
{this.state.logged ?
<div>
<p>Hello</p>
</div>
: Login()
</div>
)}
}

const mapStateToProps = (state, props) => {
  return {
      logged: state.logged
  }
}

export default connect(mapStateToProps)(Dashboard)

reducer:

const initialState = {
    login: [],
    logged: false
}

function rootReducer(state = initialState, action) {
    switch(action.type) {
        case VALIDATE_LOGIN:
            return  {
                    // logged: action.text.name == "a" && action.text.password == "b" ? true : false,
                    ...state,
                    logged: true
                }
        default:
            return state
    }

}

export default rootReducer

why it doesn't want to change state of dashboard and render proper content? Thanks

EDIT here I add code where i dispatch my reducer:Login:

class Login extends Component {
  state = {
    name: "",
    password: ""
  };


  handleLogin = () => {
    this.props.LogIn(this.state)
  }

  render() {
    return (
      <div>
        <Typography variant="h3">
          Login Form
        </Typography>
        <form>
          <TextField label="name" onChange={el => this.setState({name: el.target.value})} />
          <TextField label="password" type="password" onChange={el => this.setState({password: el.target.value})} />
          <Button onClick={this.handleLogin}>Login</Button>
        </form>
      </div>
    );
  }
}

const dispatchToProps = dispatch => {
  return {
    LogIn: login => dispatch(LogIn(login))
  }
}

export default connect(null, dispatchToProps)(Login);

when I try to console log logged in mapStateToProps then i can see that logged has changed to true, but unfortunatelly no visible effect on the dashboard. My idea is that maybe it doesn't rerender after changing state but I dont know...

解决方案

Change

{this.state.logged ?
<div>
<p>Hello</p>
</div>
: Login()
</div>
)}

with

{this.props.logged ?
<div>
<p>Hello</p>
</div>
: Login()
</div>
)}

这篇关于mapStateToProps 不会改变状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-22 08:49