Reactjs 无法读取从express（react）返回的对象的长度_Reactjs_Express

Reactjs 无法读取从express（react）返回的对象的长度

reactjs express

Reactjs 无法读取从express（react）返回的对象的长度,reactjs,express,Reactjs,Express,我正在尝试制作一个页面，该页面提取了大量关于用户的数据，然后显示出来（这部分很好）。但是，我希望在fetch中设置一个条件，以便在没有从服务器返回任何内容时，可以设置令牌或其他内容我所需要的只是有一个条件来发现fetch语句是否真的包含任何信息（剩下的我就放心了）下面是一段代码片段，描述了我正在尝试做的事情 // sets the questions from sql into state for questions getItems() { var user = windo

我正在尝试制作一个页面，该页面提取了大量关于用户的数据，然后显示出来（这部分很好）。但是，我希望在fetch中设置一个条件，以便在没有从服务器返回任何内容时，可以设置令牌或其他内容

我所需要的只是有一个条件来发现fetch语句是否真的包含任何信息（剩下的我就放心了）

下面是一段代码片段，描述了我正在尝试做的事情

 // sets the questions from 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 });
        });

        if(this.state.AccountDetails.DeskLocation.length <0){
         alert("yes")
        }
        else if(this.state.AccountDetails.DeskLocation.length  >0){
          alert("no")
        }
        else{
          alert("damm")
        }

      } else {
      alert("user not set");
    }
  }

有什么建议吗

编辑当代码运行时，我只收到警报damm。我对其他方法持开放态度

我已经更新了它，使它现在在渲染方法中运行，但是类似的问题仍然存在


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

    this.state = { AccountDetails: [] };
  }

  // 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()

    });console.log(this.state.AccountDetails)
  }

  render() {
    var self = this;
    return (
      <>
        <h3 style={{ textAlign: "center" }}>
          {" "}
          <u> Manage Workstations</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 Workstations
            </button>

            <DisplayAddWorkstation />

            <br />
            <br />

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

            <br />
            <br />
            <div className="jumbotron">
            <DisplayAddWorkstation />
              <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>
        )}
      </>
    );
  }
}


类manager.Component{
构造函数（）{
超级（）；
this.state={AccountDetails:[]}；
}
//将问题从sql设置为问题的状态
getItems（）{
var user=window.localStorage.getItem（“用户”）；
如果（用户）{
获取（`/profile工作站详细信息/${user}`）
.then（recordset=>recordset.json（））
。然后（结果=>{
this.setState（{AccountDetails:results.recordset}）；
});
}否则{
警报（“未设置用户”）；
}
}
//当组件装载时，使sql问题
componentDidMount（）{
这是我的国家({
AccountDetails:this.getItems（）
})；console.log（this.state.AccountDetails）
}
render（）{
var self=这个；
返回(
{" "}
管理工作站
{！这个.state.AccountDetails(

帐户详细信息
管理工作站




{this.state.AccountDetails&&
this.state.AccountDetails.map（函数（AccountDetails，index）{
返回(
);
})}

) : (





X
工作站

办公桌位置：空


其他信息：
无效的


添加日期：空


)}
);
}
}

检查对象长度的实现与数组不同。因此，以下链接可能会有所帮助：

您需要做哪些更改

将（此）

绑定到方法

fetch

是异步操作，因此您已经在更新状态，因此不需要在

componentDidMount

中更新状态。只需调用该方法即可触发它

无需在

componentDidMount

和

中使用setState
。然后（）

的

setState

使用回调来记录它。对于日志记录，您可以使用

componentdiddupdate

lifecycle方法

constructor（）{
超级（）；
this.state={AccountDetails:[]}；
this.getItems=this.getItems.bind（this）//{
console.log（this.state.AccountDetails）；//由于setState是异步的，也许您应该直接使用results对象进行测试，例如：if（results.recordset.DeskLocation.length）您似乎对承诺是如何异步的以及.then（）
原理是如何工作的以及setState（）这一事实有误解是异步的，您不能将其值放在后续行中。我已将其从这里取出并放入我的渲染方法中。请查看更新问题。这很有用，但我如何在if statemtn中使用它？您的意思是在具有不同条件的before edit中？如果是，则可以在回调中将其作为su移动ggested。我试过了，它不能正常工作。当帐户详细信息存在时，它无法理解。

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

    this.state = { AccountDetails: [] };
  }

  // 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()

    });console.log(this.state.AccountDetails)
  }

  render() {
    var self = this;
    return (
      <>
        <h3 style={{ textAlign: "center" }}>
          {" "}
          <u> Manage Workstations</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 Workstations
            </button>

            <DisplayAddWorkstation />

            <br />
            <br />

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

            <br />
            <br />
            <div className="jumbotron">
            <DisplayAddWorkstation />
              <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>
        )}
      </>
    );
  }
}

constructor() {
   super();
   this.state = { AccountDetails: [] };
   this.getItems = this.getItems.bind(this); //<------1.
}

componentDidMount() {
   this.getItems();  //<----------call it here
}
// You can make use of "componentDidUpdate" to log the updated state.

.then(results => {
   this.setState({ AccountDetails: results.recordset }, ()=>{
       console.log(this.state.AccountDetails); // <----check the log here.
       // You can move your conditions here
   });
});