Ошибка типа: this.state.map не является функцией

Question

ОБНОВЛЕНИЕ Ответ был массивом, но проблема возникла из бэкэнда (папка Express / Build)

Возвращаясь к проблеме, с которой я столкнулся некоторое время go.

В моей среде DEV - нет проблем. После развертывания (Heroku) я получаю сообщение «this.state.workorders.map не является функцией». Я также попытался "Object.keys and values" в случае, если он обрабатывался как таковой, но просто возвращает мне пустые значения.

Это то, что я получаю ниже

const WorkOrder = props => (
  <tr>
    <td>{props.workorder.employee}</td>
    <td>{props.workorder.description}</td>
    <td>{props.workorder.duration}</td>
    <td>{props.workorder.date.substring(0, 10)}</td>
    <td>
      <Link to={"/edit/" + props.workorder._id}>Edit</Link> |{" "}
      <a
        href="#"
        onClick={() => {
          props.deleteWorkOrder(props.workorder._id);
        }}
      >
        Delete
      </a>
    </td>
    <td>
      <a
        href="#"
        onClick={() => {
          props.markComplete(props.workorder._id);
        }}
      >
        Completed
      </a>
    </td>
  </tr>
);

class WorkOrdersList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      workorders: []
    };
    this.deleteWorkOrder = this.deleteWorkOrder.bind(this);
    this.markComplete = this.markComplete.bind(this);
  }

  onLogoutClick = e => {
    e.preventDefault();
    this.props.logoutUser();
  };

  componentDidMount = () => {
    axios
      .get("/workorders/")
      .then(response => {
        this.setState({ workorders: response.data });
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  };

  deleteWorkOrder(id) {
    axios.delete("/workorders/" + id).then(response => {
      console.log(response.data);
    });

    this.setState({
      workorders: this.state.workorders.filter(el => el._id !== id)
    });
  }

  markComplete(id) {
    axios
      .patch("/workorders/" + id, { isComplete: "true" })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });

    this.setState({
      workorders: this.state.workorders.filter(el => el._id !== id)
    });
  }

  workordersList = () => {
    return this.state.workorders.map(currentworkorder => {
        return (
          <WorkOrder
            workorder={currentworkorder}
            deleteWorkOrder={this.deleteWorkOrder}
            markComplete={this.markComplete}
            key={currentworkorder._id}
          />
        );
      })
    );
  };

  render() {
    return (
      <div className="containerMax">
        <div className="row">
          <div className="col-9">
            <h3>Open Work Orders</h3>
          </div>
          <div className="col-3">
            <button
              type="button"
              class="btn btn-outline-danger"
              onClick={this.onLogoutClick}
            >
              Logout
            </button>
          </div>
        </div>

        <table className="table">
          <thead className="thead-light">
            <tr>
              <th>Employee</th>
              <th>Description</th>
              <th>Duration (minutes)</th>
              <th>Scheduled Date</th>
              <th>Actions</th>
              <th>Completed Job</th>
            </tr>
          </thead>
          <tbody>{this.workordersList()}</tbody>
        </table>
        <br />
      </div>
    );
  }
}

WorkOrdersList.propTypes = {
  logoutUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
  auth: state.auth
});
export default connect(mapStateToProps, { logoutUser })(WorkOrdersList);

Answer 1

Проверьте вашу функцию componentDidMount(), если response.data является массивом:

componentDidMount = () => {
    axios
      .get("/workorders/")
      .then(response => {
        this.setState({ workorders: response.data });  <============ HERE
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
};

Затем подтвердите вашу componentDidMount() функцию:

workordersList = () => {

    if (this.state.workorders && this.state.workorders.length) {
        return this.state.workorders.map(currentworkorder => {
            return (
                <WorkOrder
                    workorder={currentworkorder}
                    deleteWorkOrder={this.deleteWorkOrder}
                    markComplete={this.markComplete}
                    key={currentworkorder._id}
                />
            );
    });

    } else { return []; }
};

Answer 2

Попробуйте связать workordersList в конструкторе компонентов WorkOrdersList. Это будет выглядеть так:

constructor(props) {
  super(props);
  this.state = {
    workorders: []
  };
  this.deleteWorkOrder = this.deleteWorkOrder.bind(this);
  this.markComplete = this.markComplete.bind(this);

  this.workordersList = this.workordersList.bind(this);
}

Также вам нужно подождать, пока метод ax ios in componentDidMount полностью загрузит все рабочие заказы.

Итак, в вашем render, в В тег tbody можно поместить следующее:

{this.state.workorders.length > 0 ? this.workordersList() : ""}

Надеюсь, это поможет