類型錯誤：this.state.map 不是函數

Question

UPDATE Response 是一個數組 - 但問題來自后端（Express/Build 文件夾）

回到我不久前遇到的一個問題。

在我的 DEV 環境中 - 沒有問題。 一旦我部署（Heroku），我就會得到“this.state.workorders.map is not a function”。 我還嘗試了“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

如果 response.data 是一個數組，請檢查您的函數componentDidMount() ：

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

您還需要等到componentDidMount方法中的 axios 完全加載所有工作訂單。

因此，在您的render ，在 tbody 標簽中，您可以輸入以下內容：

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

希望能幫助到你