时间戳

首页 > 解决方案 > 分配默认道具时，状态不会通过 redux 更改

javascript - 分配默认道具时，状态不会通过 redux 更改

问题描述

我在我的反应项目中使用 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 开发工具显示我从假到真的更新状态，但我的警告有假值。在我看来，这是带有默认道具的东西。你有什么想法可能是什么问题吗？

标签： javascriptreactjsreduxreact-proptypes

解决方案

问题在这里：

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

它应该是

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

因为组件找不到warningprop，所以将它设置为默认值，所以你必须给它起相同的名字。

推荐阅读