分配默認道具時狀態不會通過redux更改

Question

我在我的React項目中使用redux。 我在我的減速器中設置了初始狀態

const initialState = {
  isWarning: false,
};

我的React組件中有默認道具

LoginView.defaultProps = {
  warning: false,
};

當然，我正在用render方法破壞我的道具

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開發人員工具將我的更新狀態從“假”更改為“真”，但是我的警告具有假值。 我認為這是帶有默認道具的東西。 您有什么想法可能是個問題嗎？

Answer 1

問題在這里：

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

應該是

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

由於該組件找不到warning道具，因此將其設置為默認值，因此必須給它起相同的名稱。