由于异步数据，Materialize Select在反应渲染的条件块中不起作用

Question

我正试图从react组件中的firestore中获取数据，并在Materialize Select中进行渲染，但是由于异步代码而无法正常工作，对于静态代码而言它仍然可以正常工作。请帮助确定解决方案，谢谢。

import React, { Component } from "react";
import { Redirect, Link } from "react-router-dom";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";
import { compose } from "redux";
import { addUser } from "../../store/actions/addUser";
import M from "materialize-css";

export class AddUser extends Component {
  state = {
    email: "",
    password: "",
  };
  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };
  handleSubmit = e => {
    e.preventDefault();
    this.props.addUser(this.state);
    this.props.history.push("/users");
  };

  componentDidMount() {
    M.AutoInit();
  }

  render() {

    const { deps, sites } = this.props;

    if (sites && deps) {
      return (
        <div className="container">
          <form className="white" onSubmit={this.handleSubmit}>
            <h5 className="grey-text text-darken-3">
              Add New User in Your Orgnazation
            </h5>

            <div className="input-field">
              <label htmlFor="email">Email</label>
              <input
                type="email"
                id="email"
                name="email"
                onChange={this.handleChange}
              />
            </div>
            <div className="input-field">
              <label htmlFor="password">Password</label>
              <input
                type="password"
                id="password"
                name="password"
                onChange={this.handleChange}
              />
            </div>

            <table>
              <tbody>
                <tr>
                  <td>
                    <div className="input-field">
                      <select
                        name="orgType"
                        onChange={this.handleChange}
                        className="browser-default"
                      >
                        <option value="" disabled>
                          Choose the Site
                        </option>
                        {sites.map(site => (
                          <option key={site.id} value={site.id}>
                            {site.siteName}
                          </option>
                        ))}
                      </select>
                    </div>
                  </td>
                  <td>
                    <div className="input-field">
                      <select
                        multiple
                        className="browser-default"
                        name="orgType"
                        onChange={this.handleChange}
                      >
                        <option value="" disabled>
                          Choose the Department
                        </option>
                        <option value="hospital">Hospital</option>
                        <option value="clinic">Clinic</option>
                        <option value="careHome">Care Home</option>
                      </select>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>

            <div className="input-field">
              <button className="btn ">Add User</button>
            </div>
            <div className="input-field">
              <Link to="/users" className="btn">
                Back to User List
              </Link>
              <div className="center red-text">
                {authError ? <p>{authError}</p> : null}
              </div>
            </div>
          </form>
        </div>
      );
    } else return null;
  }
}

const mapDispatchToProps = dispatch => {
  return {
    addUser: creds => dispatch(addUser(creds))
  };
};

const mapStateToProps = (state, ownProps) => {
  return {
    deps: state.firestore.ordered.deps,
    sites: state.firestore.ordered.sites,
    auth: state.firebase.auth,
    authError: state.user.authError2
  };
};

export default compose(
  connect(
    mapStateToProps,
    mapDispatchToProps
  ),
  firestoreConnect([
    {
      collection: "deps"
    },
    {
      collection: "sites"
    }
  ])
)(AddUser);

我试图在componentDidMount和componentWillMount中都初始化M.AutoInit（），但是没有收益。

此行使问题无法显示“选择实现”，但浏览器默认设置正常运行。

if (sites && deps)
{
//Materialize select and option are here which are not showing but the browser-default is working
}