Question

我的本机应用程序中有登录流程。当用户输入其凭据时，将分派一个操作以对其进行验证，然后分派另一个操作以由化简器修改状态。

在我的组件中，我以这种方式注册更改：

function mapStateToProps(state) {
  return { userConnected: state.user.connected }
}

export default connect(mapStateToProps)(LoginScreen)

当使用该功能接收到新道具时，我将执行操作：

async componentWillReceiveProps(newProps){
  if(newProps.userConnected){
    this.props.navigation.navigate("Home");
  }else{
    this.showWrongCredentials();
  }
}

当用户第一次输入错误的凭据时，道具会使用connected = false进行更新，因此会显示错误的凭据消息。如果用户用错误的凭据再次单击，状态将收到相同的值 connected = false ，因此方法 componentWillReceiveProps < / strong>不会被调用，并且我无法再次显示错误的凭据消息。

我该怎么做？每次状态更新时，即使值相同，我都希望触发方法 componentWillReceiveProps 。

Answer 1

是的，这种行为是设计使然。

来自react-redux doc

如果要关注性能，则提高性能的最佳方法是跳过不必要的重新渲染，以便仅在数据实际更改时才重新渲染组件。

或者，如果您喜欢source

请注意，selectorFactory负责所有入站和出站道具的缓存/存储。不要在没有记住选择器之间的调用结果的情况下直接使用connectAdvanced，否则 Connect组件将在每种状态或道具更改时重新呈现。

您提到用户在输入凭据时单击。我建议由于用户单击而更改商店的某些属性。因此，每次点击凭证都将得到验证并打印消息。

介绍要存储的其他变量，该变量将在输入凭据后用作每次用户单击的标志。可以将其命名为credentialEnteredFlag，并在每次用户输入凭据时将其设置为true。然后采取措施将credentialEnteredFlag从false重置为componentWillReceiveProps。

componentWillReceiveProps看起来像

async componentWillReceiveProps(newProps){
    if(newProps.credentialEnteredFlag){
        this.props.resetCredentialEnteredFlag();

        if(newProps.userConnected){
            this.props.navigation.navigate("Home");
        }else{
            this.showWrongCredentials();
        }
    }
}

与Redux用相同值更新状态时，组件未更新

1 个答案: