加载时如何跳过React功能组件的元素渲染？

Question

我在React中有一个简单的功能组件，用于呈现搜索结果。如果有结果，则呈现用户名，如果无结果，则呈现消息no public records found。问题是在加载组件时会呈现该消息，而我只想在serp数组中没有结果时才显示该消息。我不想仅仅因为这个而将其更改为类组件，并且我敢肯定有一种方法可以在组件加载时“跳过”消息的呈现。

您能帮忙弄清楚吗？

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

您能解释什么是“ serp”吗？根据我所见，您可以解决在第一个条件中添加条件“！loading”的问题。

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