Состояние не меняется через приставку при назначении реквизита по умолчанию

Question

Я использую Redux в моем проекте. Я установил начальное состояние в моем редукторе

const initialState = {
  isWarning: false,
};

и у меня есть реквизиты по умолчанию в моем компоненте реакции

LoginView.defaultProps = {
  warning: false,
};

и, конечно, я разрушаю свои реквизиты в методе рендеринга

const { warning } = this.props;

здесь у вас есть код из моего компонента

import React, { Component } from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import axios from '../../axios';
import Input from '../Input/Input';
import LoggedIn from '../LoggedIn/LoggedIn';
import * as actions from '../../store/actions';

const StyledWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
`;

const StyledTitle = styled.p`
  color: #727272;
  margin: 89px 0 73px 0;
  font-size: 24px;
`;

const StyledButton = styled.button`
  border: none;
  border-radius: 6px;
  background: #1de278;
  height: 48px;
  width: 397px;
  color: #fff;
  font-size: 18px;
  cursor: pointer;

  &:active,
  &:focus {
    outline: none;
  }
`;

class LoginView extends Component {
  state = {
  email: '',
  password: '',
};

onType = event => {
  this.setState({ [event.target.id]: event.target.value });
};

onSubmit = (email, password) => {
  axios
    .post('api/v1/session', {
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      email,
      password,
    })
    // eslint-disable-next-line react/destructuring-assignment
    .then(() => this.props.history.push('/'))
    .catch(() => this.props.onLoginError(true));
};

render() {
  const { email, password } = this.state;
  const { warning } = this.props;
  return (
    <StyledWrapper>
      {console.log(warning)}
      <StyledTitle>Log in</StyledTitle>
      <Input id="email" placeholderText="Email address" 
          setInputValue={this.onType} />
      <Input
        id="password"
        placeholderText="Password"
        setInputValue={this.onType}
        type="password"
      />
      <LoggedIn />
      <StyledButton onClick={() => this.onSubmit(email, 
        password)}>Login</StyledButton>
    </StyledWrapper>
  );
}
}

const mapStateToProps = state => {
  return { isWarning: state.login.isWarning };
};

const mapDispatchToProps = dispatch => {
  return {
    onLoginError: state => dispatch(actions.setErrorLogin(state)),
  };
};

LoginView.propTypes = {
  warning: PropTypes.bool,
};

LoginView.defaultProps = {
  warning: false,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(LoginView);

Redux dev tools показывает моё обновленное состояние от false до true, но мое предупреждение имеет значение false. На мой взгляд, это что-то с реквизитом по умолчанию. У вас есть идеи, что может быть проблемой?

Answer 1

Проблема здесь:

const mapStateToProps = state => {
  return { isWarning: state.login.isWarning };
};

это должно быть

const mapStateToProps = state => {
  return { warning: state.login.isWarning };
};

Поскольку компонент не может найти пропелу warning, он устанавливает его в значение по умолчанию,поэтому вы должны дать ему то же имя.