Получение «Невозможно вызвать класс как функцию» в моем проекте React

Question

Я пытаюсь подключить свое реагирующее приложение к firebase, оно прекрасно работало, прежде чем подключить его к firebase, теперь я получаю эту ошибку:

Клиенты

src / компоненты / клиенты /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);

Как я могу решить эту проблему?я впервые попробую огненную базу.Я использую версию «Response-Redux» версии 5.1.1 и «React-Redux-Firebase» версии 2.2.4.

Answer 1

Я исправил проблему, изменив эти строки:

Сначала я изменил:

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
};

и теперь он работает отлично

Answer 2

Кажется, вы используете реагирующий маршрутизатор.

В вашем файле маршрутизатора .js измените это:

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

На это:

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

Другое исправлениебыло бы, к сожалению, избежать «сочинения», выполнив это:

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