TypeError: this.state.workorders.map is not a function

问题

MERN app deployed to Heroku - All works well in my dev environment but once I deploy and receive a successful build to production; My landing page and login are fine but once routed to the Home page where a list of workorders should appear - just a blank page with the console stating that "TypeError: this.state.workorders.map is not a function"

I've looked around quite a bit trying to resolve this - I understand that you can only map through an array, etc. but I am sure missing something. Any help is greatly appreciated and will provide more information if the code below is not enough or too vague.

 class WorkOrdersList extends Component {
  constructor(props) {
    super(props);

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

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

  componentDidMount() {
    axios
      .get("/workorders/")
      .then(response => {
        this.setState({ workorders: response.data });
      })
      .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>
    );
  }
}

回答1:

Try to change workordersList to arrow function. The problem can be because this in workordersList might not referring to the current instance.

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

回答2:

Try to log response.data in componentDidMount() it seems that response.data is not an array.

And one more thing, it is not recommended to directly use this.state in this.setState(), a better approach is to use preState like this

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

回答3:

Resulted in the express/build needing some extra eyes on the syntax and layout :)

The call did return an array, therefore issue resolved.

来源：https://stackoverflow.com/questions/59910300/typeerror-this-state-workorders-map-is-not-a-function

标签

javascript

node.js

reactjs

heroku