[英]Material-UI Switch status is not being updated from DB value
The Material-ui Switch is not updating when the firebase value is updated. 当更新Firebase值时,Material-ui开关未更新。
I posted just a part of the code here, the full Demo is available on CodeSandbox. 我在此处仅发布了一部分代码,完整的演示可在CodeSandbox上找到。
The project is connected to firebase and using depenedncies as: react-redux-firebase, redux-firestore, etc, you can find all details in the Demo. 该项目已连接到Firebase,并使用depenedncies:react-redux-firebase,redux-firestore等,您可以在演示中找到所有详细信息。
CodeSandobox Demo CodeSandobox演示
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);
const dbStatus = Boolean(status && status[0].status);
const dbStatus = status && status[0].status;
can result in dbStatus
being undefined upon which the component is considered uncontrolled. 可能导致
dbStatus
未被定义,因此该组件被视为不受控制。 Once it gets defined you should get a warning. 一旦定义,您应该得到警告。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.