Question

我正在尝试绕开常规渲染，并开始尝试使用匿名函数来实现这一点。

伪代码

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

为什么当一个渲染但另一个加载正常时会引发错误？我缺少一些逻辑吗？

Answer 1

1）您缺少if else语句的花括号{}。

2）您应该在JavaScript中签出三元运算符。

Answer 2

我很确定您缺少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)
      }
  }

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

使用匿名函数进行条件渲染（反应）

3 个答案: