Компонент не обновляется, когда состояние обновляется с теми же значениями с помощью приставки

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

Первыйвремя, когда пользователь вводит неверные учетные данные, реквизиты обновляются с подключением = false, поэтому отображается неверное сообщение с учетными данными.Если пользователь щелкает другой раз с неправильными учетными данными, состояние получит те же значения connected = false , поэтому метод componentWillReceiveProps не вызывается, и я не могу снова показать неправильное сообщение с учетными данными.

Как я могу это сделать?Каждый раз, когда состояние обновляется, даже если значения совпадают, я бы хотел, чтобы метод componentWillReceiveProps был запущен.

Answer 1

Да, такое поведение задуманно.

С реакт-редукс док

Если производительность вызывает беспокойство, лучший способ повысить производительность - это пропустить ненужные повторные рендеринг, чтобы компоненты выполняли повторный рендеринг только тогда, когда их данные действительно изменились

Или, если вам нравится источник

Обратите внимание, что 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();
        }
    }
}