加載時如何跳過渲染 React 功能組件的元素？

Question

我在 React 中有一個簡單的功能組件，用於呈現搜索結果。 如果有結果，則呈現用戶名，如果沒有結果，則呈現消息no public records found 。 問題是在加載組件時會呈現消息，而我只想在serp數組中沒有結果時才顯示它。 我不想僅僅因為這個而將它更改為 class 組件，而且我確信有一種方法可以在組件加載時“跳過”消息的呈現。

你能幫忙弄清楚嗎？

import React from "react";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";

const SearchResults = ({ auth: { user }, search: { users, loading } }) => {
  let serp;

  if (users.length !== 0) {
    serp = users.map((item, i) => {
      return <div key={i}>{item.name}</div>;
    });
  } else {
    return <div>no public record found</div>;
  }

  return <div className="dashboard-container">{serp}</div>;
};

SearchResults.propTypes = {
  auth: PropTypes.object.isRequired,
  search: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  search: state.search
});

export default connect(mapStateToProps)(withRouter(SearchResults));

Answer 1

您可以像這樣使用加載：

const SearchResults = ({ auth: { user }, search: { users, loading } }) => {
  let serp;

  if (users.length !== 0) {
    serp = users.map((item, i) => {
      return <div key={i}>{item.name}</div>;
    });
  } else {
    if (loading) {
      return <div>Loading...</div>;
    } else {
      return <div>no public record found</div>;
    }
  }

  return <div className="dashboard-container">{serp}</div>;
};

Answer 2

由於 SuleymanSah 建議您應該使用loading道具來創建加載效果，以下是我的建議以提高可讀性：

1. 創建一個名為withLoading的 HOC，如下所示：

const withLoading = isLoading => WrappedComponent =>
  isLoading ? <div>Loading...</div> : WrappedComponent;

2. 在組件中像這樣使用withLoading ：

const SearchResults = ({ auth: { user }, search: { users, loading } }) => {
  ...
  return (
   <div className="dashboard-container">
     {withLoading(loading)(...)}
   </div>;
  )
};

有太多這樣的if/else會減慢你在未來閱讀代碼時的速度。 也請考慮使用帶有條件運算符的內聯 If-Else 以獲得更好的可讀性。