Question

我正在创建一个页面，如果从数据库中提取了某些内容，它将显示此信息，否则显示其他信息。

目前，数据是从明确的后端提取的。

下面是代码。

class ManageWorkstations extends React.Component {
  constructor() {
    super();

    this.state = { AccountDetails: [], exist: "" };
    this.getItems = this.getItems.bind(this);
  }

  // sets the questions from sql into state for questions
  getItems() {
    try {
      var user = window.localStorage.getItem("User");
      if (user) {
        fetch(`/profile-work-station-detailss/${user}`)
          .then(recordset => recordset.json())
          .then(results => {
            console.log(this.state.AccountDetails);
            this.setState({ AccountDetails: results.recordset });

            console.log(this.state.AccountDetails);

          });
      } else {
        alert("user not set");
      }
    } catch (e) {
      console.log(e)
    }
  }

  //when the component mounts make the sql questions the
  componentDidMount() {


    this.getItems()

    console.log(this.state.AccountDetails)
  }

  render() {
    if (this.state.AccountDetails.DeskLocation) {

      return (
        <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 Workstations
            </button>

          <DisplayAddWorkstation />

          <br />
          <br />

          {this.state.AccountDetails &&
            this.state.AccountDetails.map(function (AccountDetails, index) {
              return (
                <WorkStations AccountDetails={AccountDetails}></WorkStations>
              );
            })}
        </ul>
      )
    } else {
      return (<>this is what I want</>)
    }
  }
}

export default ManageWorkstations;

我希望您可以看到，我正在渲染器中使用if语句来显示这些是否存在。但是，我唯一可以使用的语句是是否设置了该语句，以使帐户详细信息不存在。我将如何更新它，以便它可以正确找到此信息，而不仅仅是使它始终认为它不存在。

Answer 1

在渲染器中，我会做类似的事情

render() {


return (
{this.state.AccountDetails.length > 0 ?
      <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 Workstations
        </button>

        <DisplayAddWorkstation />

        <br />
        <br />

        {this.state.AccountDetails &&
          this.state.AccountDetails.map(function(AccountDetails, index) {
            return (
              <WorkStations AccountDetails={AccountDetails}></WorkStations>
            );
          })}
      </ul> : <>this is what I want</>}
)

由于您将数组初始化为空，因此只需检查this.state.AccountDetails.length > 0 另外请注意，由于输出是对象数组而不是对象本身，因此不能像这样检查this.state.AccountDetails.DeskLocation。

Answer 2

从共享的示例输出中，

AccountDetails是一个数组。您应该像这样检查。

 const { AccountDetails  } = this.state;


 if(AccountDetails.length === 0 ){
  return(<>this is what I want</>
 }

return AccountDetails.length > 0 && (
          <ul>
            ......
            {
              AccountDetails.map(function(AccountDetails, index) {
                return (
                  <WorkStations AccountDetails={AccountDetails}></WorkStations>
                );
              })}
          </ul>
    )

使用状态进行条件渲染

2 个答案: