Question

我正在尝试将我的React应用程序连接到Firebase，因为将其连接到Firebase之前，它运行良好，现在出现此错误：

客户

src / components / clients / Clients.js：16：8

if (clients) {
return (
<div>
<div className="row">
<div className="col-md-6">
<h2>

这是我的Clients.js代码：

import React, { Component } from "react";
import { Link } from "react-router-dom";

import { compose } from "redux";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";

import PropTypes from "prop-types";

class Clients extends Component {
  render() {
    const clients = this.props.clients;

    if (clients) {
      return (
        <div>
          <div className="row">
            <div className="col-md-6">
              <h2>
                {" "}
                <i className="fas fa-users" /> Clients{" "}
              </h2>
            </div>
            <div className="col-md-6">---</div>
          </div>

          <table className="table table-striped">
            <thead className="thead-inverse">
              <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Balance</th>
                <th />
              </tr>
            </thead>

            <tbody>
              {clients.map(client => (
                <tr key={client.id}>
                  <td>
                    {client.firstName} {client.lastName}
                  </td>
                  <td>{client.email}</td>
                  <td>${parseFloat(client.balance).toFixed(2)}</td>
                  <td>
                    <Link
                      to={`/client/${client.id}`}
                      className="btn btn-secondary btn-sm"
                    >
                      <i className="fas fa-arrow-circle-right" /> Details
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      );
    } else {
      return <h1>Loading</h1>;
    }
  }
}

Clients.prototype = {
  firestore: PropTypes.object.isRequired,
  clients: PropTypes.array
};

export default compose(
  firestoreConnect([{ collection: "clients" }]),
  connect((state, props) => ({
    clients: state.firestore.ordered.clients
  }))
)(Clients);

我该如何解决这个问题？这是我第一次尝试射击基地。我正在使用5.1.1版的“ react-redux”和2.2.4版的“ react-redux-firebase”。

Answer 1

您似乎使用了react-router。

在您的router .js文件中，更改以下内容：

<Route path="/" render={Clients} />

对此：

<Route path="/" component={Clients} />

另一种解决方法是通过执行此操作来避免“撰写”：

connect(
  (state, props) => ({
    clients: state.firestore.ordered.clients
  })
)(
  firestoreConnect([{ collection: "clients" }])(Clients)
);

Answer 2

我通过更改以下行解决了该问题：

首先，我改变了：

const clients = this.props.clients;

收件人：

const { clients } = this.props;

然后我改变了：

Clients.prototype = {
  firestore: PropTypes.object.isRequired,
  clients: PropTypes.array
};

收件人：

Clients.propTypes = {
  firestore: PropTypes.object.isRequired,
  clients: PropTypes.array
};

现在它运行良好

在我的React项目中获得“无法将类作为函数调用”

2 个答案: