Невозможно прочитать длину объекта, возвращенного из express (реагирует)

Question

Я пытаюсь создать страницу, которая собирает данные о пользователях и затем отображает их (эта часть в порядке). Однако мне бы хотелось, чтобы внутри выборки было условие, чтобы, если с сервера ничего не возвращалось, токен или что-то можно было установить.

Все, что я хочу, - это иметь условие, которое находит, содержит ли оператор 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");
    }
  }

Поскольку я возвращаю json, эти отдельные части для запроса будут использоваться, как показано ниже (это было сделано в других частях этого js файла для успешной передачи этой информации)

this.state.AccountDetails.DeskLocation

Любой совет?

РЕДАКТИРОВАТЬ, когда код запускается, я получаю только сигнал тревоги. Я открыт для других методов, чтобы сделать это.

Я обновил это так, чтобы теперь он выполнялся в методе рендеринга, однако подобная проблема все еще присутствует.

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

Answer 1

Какие изменения вы должны сделать?

1. bind(this) к методу.
2. fetch - асинхронная c операция, поэтому вы уже обновляете состояние, поэтому вам не нужно обновлять его в componentDidMount. Просто вызовите метод для его запуска.
3. Нет необходимости использовать setState в componentDidMount, а в .then() setState использовать обратный вызов для регистрации. Для ведения журнала вы можете использовать метод жизненного цикла componentDidUpdate.

---

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

Answer 2

Реализация для проверки длины объекта отличается от реализации для массивов. следовательно, следующие ссылки могут быть полезны: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

https://www.encodedna.com/javascript/how-to-get-the-length-of-an-object-in-javascript.htm

https://www.geeksforgeeks.org/find-the-length-of-a-javascript-object/