Question

我是react-native和redux的新手，我想知道如何在发送后更新状态......

按照我的代码：

/LoginForm.js

function mapStateToProps(state) { return { user: state.userReducer }; }

function mapDispatchToProps(dispatch) {
  return {
    login: (username, password) => {      
      dispatch(login(username, password)); // update state loggedIn
    }
  }  
}

const LoginForm = connect(mapStateToProps, mapDispatchToProps)(Login);
export default LoginForm;

/Login.js ---这里我有一个调用此方法的按钮loginOnPress（）

loginOnPress() {
    const { username, password } = this.state;
    this.props.login(username, password);
    console.log(this.props.user.loggedIn)
  }

根据我上面的代码，我首先调用方法'this.props.login（用户名，密码）;'调用调度并更改状态' loggedIn ”。

之后我尝试更新状态，但没有成功：

console.log(this.props.user.loggedIn)

注意：当我第二次点击此按钮时，状态会更新

Answer 1

调用调度会立即更新状态，但稍后会更新您的组件，以便您可以使用componentWillReceiveProps对道具中的更改做出反应，您可以查看here以获得更好的效果解释状态变化如何在React中起作用

Answer 2

函数this.props.login(username, password)在redux-state上调度登录操作。

启动store.getState()确实会在更新后立即让你获得redux-state状态，但通常，由于 redux connect 你真的不需要这样做strong>包装组件的功能。

redux connect 功能会使用新道具更新您的组件，因此您通常会做的是＆＃34; catch＆＃34; react lifecycle的以下功能之一的这些更改：

class Greeting extends React.Component { ... loginOnPress () { const { username, password } = this.state; this.props.login(username, password); } // before the new props are applied componentWillReceiveProps (nextProps) { console.log(nextProps.user.loggedIn) } // just before the update componentWillUpdate (nextProps, nextState) { console.log(nextProps.user.loggedIn) } // immediately after the update componentDidUpdate (prevProps, prevState) { console.log(this.props.user.loggedIn) } render() { ... } }

发送后如何更新状态

2 个答案: