当 firebase 值更新时,Material-ui Switch 不会更新。
我在这里只发布了部分代码,完整的演示可以在 CodeSandbox 上找到。
该项目已连接到firebase并使用依赖项:react-redux-firebase、redux-firestore等,您可以在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);
最佳答案
const dbStatus = Boolean(status && status[0].status);
const dbStatus = status && status[0].status;
可能会导致 dbStatus
未定义,从而组件被视为不受控制。一旦定义完毕,您应该会收到警告。
关于javascript - Material -UI 开关状态未从数据库值更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53502750/