Material-UI 交换机状态未从 DB 值更新

Question

当 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);

Answer 1

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

const dbStatus = status && status[0].status; 可能导致 dbStatus 未定义，组件被认为不受控制。一旦它被定义，你应该得到一个警告。

Material-UI 交换机状态未从 DB 值更新

Material-UI Switch status is not being updated from DB value

javascript

firebase

reactjs

material-ui

react-redux-firebase