Условный рендер для реакции с использованием состояния

Question

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

Данные извлекаются из express серверной части в данный момент.

Ниже приведен код.

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