Matériel-UI état de commutation n'est pas mise à jour de la valeur DB

voix
0

Le commutateur matériel-ui est pas mis à jour lorsque la valeur est mise à jour firebase.

Je Déposée une partie du code ici, la démo est disponible sur CodeSandbox.

Le projet est connecté à Firebase et en utilisant depenedncies comme: réagir-redux-firebase, redux-FireStore, etc, vous trouverez tous les détails dans la démo.

CodeSandobox Demo

import React, { Component } from react;
import styled from styled-components;
import { connect } from react-redux;
import { firestoreConnect } from react-redux-firebase;
import { compose } from redux;
import Switch from @material-ui/core/Switch;

import { toggleStatus } from ../actions/statusActions;

const Wrapper = styled.div`
  padding-top: 50px;
`;

const OnOff = styled.span`
  ${props => `color: ${props.color}`};
`;

class Header extends Component {
  hanldeToggleStats = () => {
    const { status } = this.props;
    const dbStatus = status && status[0].status;
    this.props.toggleStatus(dbStatus);
  };

  render() {
    const { status } = this.props;
    const dbStatus = status && status[0].status;
    console.log(dbStatus:, dbStatus);

    return (
      <Wrapper>
        <div>
          Change status, refresh the page, observe difference between labels and
          Switch
        </div>
        <OnOff color={dbStatus ? #BDBDBD : #7AC943}>Off</OnOff>
        <Switch
          checked={dbStatus}
          onChange={this.hanldeToggleStats}
          color=primary
        />
        <OnOff color={dbStatus ? #7AC943 : #BDBDBD}>On</OnOff>
      </Wrapper>
    );
  }
}

const mapStateToProps = state => {
  return {
    status: state.firestore.ordered.status //this returns true
  };
};

const mapDispatchToProps = dispatch => {
  return {
    toggleStatus: status => dispatch(toggleStatus(status))
  };
};

export default compose(
  connect(
    mapStateToProps,
    mapDispatchToProps
  ),
  firestoreConnect([
    { collection: status, limit: 1, orderBy: [createdAt, desc] }
  ])
)(Header);
Créé 27/11/2018 à 15:18
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
1

const dbStatus = Boolean(status && status[0].status);

const dbStatus = status && status[0].status;peut entraîner d' dbStatusêtre indéfini sur lequel le composant est considéré comme non contrôlé. Une fois que vous devriez se définir un avertissement.

Créé 27/11/2018 à 17:21
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more