在映射详细信息中使用按钮会引发错误"Nothing was returned from render"

Question

我正在制作一个基本页面，在其中我从后端检索一堆详细信息，并通过映射它显示在我的前端。

这完全可以正常工作，但是当我尝试将按钮放入一个按钮(以及绑定它并创建一个处理程序(时，它会不断抛出错误。

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

导致问题的按钮位于使用处理程序的第二次返回中handleDelete

任何帮助都非常感谢！

编辑

这是导致错误的代码行

this.setState({ AccountDetails: results.recordset });

一旦删除 onClick 方法(不是绑定或处理程序(，页面就会再次正常加载。

Answer 1

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

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