javascript - Material-UI 开关状态未从 DB 值更新
问题描述
更新 firebase 值时,Material-ui 开关不会更新。
我在这里只发布了一部分代码,完整的 Demo 可以在 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
未定义组件被认为是不受控制的。一旦它被定义,你应该得到一个警告。
推荐阅读
- jenkins - 如何从 Jenkins 管道中的另一个文件调用函数?
- firebase - 模式 ECB:实体可能只是在 DB 上?
- string - 在子目录中导入文件(嵌套字典)
- javascript - 如何通过 ssh 将 JS mqtt sub 和 pub 连接到 AWS EC2?
- reactjs - 定义了 useContext.Provider 的 useState 值
- python - ThreadPoolExecutor 正在泄漏内存
- php - Azure 应用服务的糟糕表现 - Wordpress
- java - 超类中没有参数的超函数Java
- javascript - 将数据发布到 Heroku 上的 Postgres 数据库后,React App 页面刷新到错误页面
- c# - 无法将类型“字符串”隐式转换为“布尔”请帮助我