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

Псевдокод

if(statement)

render this

else

render something else

Условие работает, если логическое значение установлено в isLoggedin = true, но если false, оно выдает

Error: DisplayUserAcountDetails(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Мой актуальный код

render() {
    const isLoggedIn = false;
    if (isLoggedIn)
      return (
        <div>
          {(() => {
            if (isLoggedIn) {
              return (
                <ul>
                  {this.state.AccountDetails &&
                    this.state.AccountDetails.map(function(
                      AccountDetails,
                      index
                    ) {
                      return (
                        <div className="jumbotron">
                          <h3>Account Details</h3>
                          <li> Email: {AccountDetails.Email}</li>
                          <li> Name: {AccountDetails.NameOfUser}</li>
                          <li>
                            {" "}
                            Contact Number: {AccountDetails.ContactNumber}{" "}
                          </li>
                          <li>
                            <Link to="/profile-update-account-details">
                              <button>Update Account Details</button>
                            </Link>
                          </li>
                        </div>
                      );
                    })}
                </ul>
              );
            } else {
              return (
                <div>
                  <div>otherCase</div>
                  <h1>Not there</h1>
                </div>
              );
            }
          })()}
        </div>
      );
  }

Почему это приводит к ошибке, когда один отображается, а другой загружается нормально? Есть ли какая-то логика, которую мне не хватает?

0
henry pf 28 Янв 2020 в 18:07

3 ответа

Лучший ответ

Первое решение:

  render() {
    const isLoggedIn = false;

    if (!isLoggedIn) {
      return (
        <div>
          <div>otherCase</div>
          <h1>Not there</h1>
        </div>
      );
    }

    return (
      <ul>
        {this.state.AccountDetails &&
          this.state.AccountDetails.map(function(AccountDetails, index) {
            return (
              <div className="jumbotron">
                <h3>Account Details</h3>
                <li> Email: {AccountDetails.Email}</li>
                <li> Name: {AccountDetails.NameOfUser}</li>
                <li> Contact Number: {AccountDetails.ContactNumber} </li>
                <li>
                  <Link to="/profile-update-account-details">
                    <button>Update Account Details</button>
                  </Link>
                </li>
              </div>
            );
          })}
      </ul>
    );

Второе решение:

  render() {
    const isLoggedIn = false;
    return (
      <>
        {isLoggedIn ? (
          <ul>
            {this.state.AccountDetails &&
              this.state.AccountDetails.map(function(AccountDetails, index) {
                return (
                  <div className="jumbotron">
                    <h3>Account Details</h3>
                    <li> Email: {AccountDetails.Email}</li>
                    <li> Name: {AccountDetails.NameOfUser}</li>
                    <li> Contact Number: {AccountDetails.ContactNumber} </li>
                    <li>
                      <Link to="/profile-update-account-details">
                        <button>Update Account Details</button>
                      </Link>
                    </li>
                  </div>
                );
              })}
          </ul>
        ) : (
          <div>
            <div>otherCase</div>
            <h1>Not there</h1>
          </div>
        )}
      </>
    );
  }
1
Olivier Nguyen 28 Янв 2020 в 15:25

Я уверен, что вы пропустили заявление ELSE. Посмотри:

render() {
    const isLoggedIn = false;
    if (isLoggedIn)
      return (
        <div>
          {(() => {
            if (isLoggedIn) {
              return (
                <ul>
                  {this.state.AccountDetails &&
                    this.state.AccountDetails.map(function(
                      AccountDetails,
                      index
                    ) {
                      return (
                        <div className="jumbotron">
                          <h3>Account Details</h3>
                          <li> Email: {AccountDetails.Email}</li>
                          <li> Name: {AccountDetails.NameOfUser}</li>
                          <li>
                            {" "}
                            Contact Number: {AccountDetails.ContactNumber}{" "}
                          </li>
                          <li>
                            <Link to="/profile-update-account-details">
                              <button>Update Account Details</button>
                            </Link>
                          </li>
                        </div>
                      );
                    })}
                </ul>
              );
            } else {
              return (
                <div>
                  <div>otherCase</div>
                  <h1>Not there</h1>
                </div>
              );
            }
          })()}
        </div>
      );
      else 
      {
          return (null)
      }
  }
1
Fernando Ramirez 28 Янв 2020 в 15:19

1) Вам не хватает фигурных скобок {} оператора if else.

2) Вы должны проверить троичный оператор в JavaScript.

1
Risky Boy 28 Янв 2020 в 15:12