Javascript 在映射的详细信息中使用按钮会引发错误“渲染未返回任何内容”

我正在制作一个基本页面，在这个页面中，我从后端检索一系列细节，并通过映射显示到前端

不过，当我尝试在其中添加一个按钮并绑定它并创建一个处理程序时，它会一直抛出错误，这一点非常好

Error: ManageWorkstations(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

我知道这是在某些东西没有返回时抛出的，但是为什么仅仅创建一个按钮就有功能上的原因呢

下面是我的映射对象的完整代码，其中包含按钮onClick

import React from "react";
import { Link } from "react-router-dom";
import Popup from "reactjs-popup";
import { Modal, Button } from "react-bootstrap";

import AddWorkstation from "./UpdateUserWorkStationDetailsForm";
class ManageWorkstations extends React.Component {
  constructor() {
    super();

    this.state = { AccountDetails: [] };
    this.handleDelete = this.handleDelete.bind(this);
  }

  // sets the questions form sql into state for questions
  getItems() {
    var user = window.localStorage.getItem("User");
    if (user) {
      fetch(`/profile-work-station-detailss/${user}`)
        .then(recordset => recordset.json())
        .then(results => {
          this.setState({ AccountDetails: results.recordset });
        });
    } else {
      alert("user not  set");
    }
  }
  //when the component mounts make the sql questions the
  componentDidMount() {
    this.setState({
      AccountDetails: this.getItems()
    });
  }

  handleDelete(e) {
    alert("pohfspuidhfg");
  }

  render() {
    try {
      return (
        <>
          <h3 style={{ textAlign: "center" }}>
            {" "}
            <u>Manage Work Stations</u>
          </h3>
          {this.state.AccountDetails ? (
            <ul>
              <Link to="/profile">
                <button style={{ float: "left" }} className="btn btn-secondary">
                  Account Details
                </button>
              </Link>
              <button
                style={{ float: "left" }}
                className="btn btn-secondary"
                disabled
              >
                Manage Work Stations
              </button>

              <DisplayAddWorkstation />

              <br />
              <br />

              {this.state.AccountDetails &&
                this.state.AccountDetails.map(function(AccountDetails, index) {
                  return (
                    <div className="jumbotron">
                      <button
                        style={{ float: "right" }}
                        className="btn btn-secondary"
                        onClick={this.handleDelete}
                      >
                        x
                      </button>
                      <h3>Work Station</h3>

                      <li>
                        Desk Location:
                        {AccountDetails.DeskLocation}
                      </li>

                      <li>
                        Additional Information:
                        {AccountDetails.ExtraInformation}
                      </li>

                      <li>
                        Date Added:
                        {AccountDetails.DateAdded}
                      </li>
                    </div>
                  );
                })}
            </ul>
          ) : (
            <ul>
              <DisplayAddWorkstation />
              <br />
              <br />
              <div className="jumbotron">
                <button
                  className="btn btn-secondary"
                  style={{ float: "right" }}
                >
                  X
                </button>
                <h3>Work Station</h3>

                <li>
                  <div>Desk Location:</div> Null
                </li>

                <li>
                  <div>Additional Information:</div>
                  Null
                </li>

                <li>
                  <div> Date Added:</div> Null
                </li>
              </div>
            </ul>
          )}
        </>
      );
    } catch (e) {
      console.log(e);
    }
  }
}

---

一旦删除onClick方法，不绑定或处理程序，页面将再次加载。看起来您需要在catch语句中返回一些内容：

catch(e) {
  console.log(e);
  return null;
}

---

看起来您需要在catch语句中返回一些内容：

catch(e) {
  console.log(e);
  return null;
}

---

渲染函数周围有一个try catch，如果它命中catch块，则不会渲染任何内容。我怀疑您可能有另一个异常被捕获并记录。从catch中记录之后，如果返回null，会发生什么；此外，对于过期数据的注释，未定义，可能是您的错误被捕获在catch语句中。Charlie，情况并非如此，谢谢您的建议。该组件实际上是在同一个文件中定义的。@ExpiredData在我的catch中返回null时，它没有返回任何映射对象，只是返回头。渲染函数有一个try catch，如果它命中catch块，则不会渲染任何内容。我怀疑您可能有另一个异常被捕获并记录。从catch中记录之后，如果返回null，会发生什么；此外，对于过期数据的注释，未定义，可能是您的错误被捕获在catch语句中。Charlie，情况并非如此，谢谢您的建议。该组件实际上是在同一个文件中定义的。@ExpiredData在我的catch中返回null时，它没有返回任何映射对象，只是返回了头。我尝试过这个方法，但这很简单，但这会造成另一个问题，即没有显示任何映射对象，因此页面只包含头。这是因为您有一个通用的试着/抓住挡块。如果抛出任何错误，它将立即呈现catch块。我建议您删除try/catch并单独处理错误。谢谢！现在我收到一个不同的错误，应该更容易解决。TypeError:无法读取未定义的属性“handleDelete”，错误来自哪个行号？你能显示更新的代码吗？我已经尝试过了，但这很简单，但这会造成另一个问题，即没有显示任何映射对象，因此页面只包含标题。这是因为你有一个通用的try/catch块。如果抛出任何错误，它将立即呈现catch块。我建议您删除try/catch并单独处理错误。谢谢！现在我收到一个不同的错误，应该更容易解决。TypeError:无法读取未定义的属性“handleDelete”，错误来自哪个行号？你能显示更新的代码吗？