React：根据条件显示不同的组件答案

【问题标题】：React: Show different components based on conditionsReact：根据条件显示不同的组件
【发布时间】：2021-08-18 14:54:11
【问题描述】：

我有一个 React 应用程序，用户可以在其中搜索数据库中的文件。单击表单上的搜索按钮后，会出现一个带有结果的新窗口；但是，如果没有搜索结果，我希望显示一个不同的组件来指示没有搜索结果。

在表单所在的窗格中，这就是我所拥有的：

export default function PersistentDrawerLeft() {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);
  const [showSearchForm, setShowSearchForm] = React.useState(true);
  const [showSubscribeForm, setShowSubscribeForm] = React.useState(true);
  const [showUploadForm, setShowUploadForm] = React.useState(true);
  const [showSearchResults, setShowSearchResults] = React.useState(false);
  const [searchResults, setSearchResults] = React.useState({});
  const [showBoundingBox, setShowBoundingBox] = React.useState(false);
  const [showNoResults, setShowNoResults] = React.useState(false);

  ...

    const getSearchStatus = (status) => {
    if (status === true) {
      setShowSearchForm(false);
      setShowSubscribeForm(true);
      setShowUploadForm(true);
      setShowSearchResults(true);
      setShowNoResults(true);
      setShowBoundingBox(true);
    }
  }

  const getSearchResults = (results) => {
    if(Object.keys(results).length > 0) {
      console.log("Ready to render search results!");
      console.log(results);
      setSearchResults(results);
    }
  }

  function identifySearchResults(results) {
    if(Object.keys(results).length > 0) {
      console.log("It is true!");
      return true;
    }
    else {
      console.log("It is false!");
      return false;
    }
  }

  const getReturnToSearchStatus = (status) => {
    if (status === true) {
      setShowSearchForm(true);
      setShowSubscribeForm(true);
      setShowUploadForm(true);
      setShowSearchResults(false);
      setShowNoResults(false);
      setShowBoundingBox(false);
    }
  }

  function SearchFormWrapper(props) {
    if (!props.show) {
      return null;
    }
  
    return (
      <SearchForm 
        searchInProgress={getSearchStatus}
        latestSearchResults={getSearchResults}
      ></SearchForm>
    );
  }

  function SearchResultsWrapper(props) {
    if (!props.show) {
      return null;
    }
  
    return (
        <ResultsContainer 
        returnToSearchStatus={getReturnToSearchStatus}
        resultsToRender={searchResults}
      ></ResultsContainer>
    );
  }

稍后在同一个文件中（在 return 语句中），我尝试执行此条件语句

<TabPanel value={value} index={0}>
              <SearchFormWrapper show={showSearchForm}></SearchFormWrapper>
              { identifySearchResults  ? <SearchResultsWrapper show={showSearchResults}></SearchResultsWrapper> : <NoSearchResultsWrapper show={showNoResults}></NoSearchResultsWrapper>}
</TabPanel>

但它不是有条件地显示结果。

【问题讨论】：

你有太多的布尔状态代表同一件事。例如showSearchResults 可用于显示结果和显示无结果组件。
看起来identifySearchResults 是一个带参数的函数，但在TabPanel 中你却像常量一样使用它
@rMonteiro 我试图让它确定真假，但我认为它不会根据我的控制台打印被调用
@RameshReddy 使用 showSearchResults 而不是 identifySearchResults 不幸的是不会对 UI 产生影响
@325 这取决于您更新状态的方式和时间。我只是建议重构组件，以便删除一些 useStates。

标签： javascript reactjs components

【解决方案1】：

您需要将searchResults 对象传递给函数identifySearchResults 以使其返回true 或false。

它应该像这样工作：

<TabPanel value={value} index={0}>
  <SearchFormWrapper show={showSearchForm} />
  {identifySearchResults(searchResults)  
    ? <SearchResultsWrapper show={showSearchResults} />
    : <NoSearchResultsWrapper show={showNoResults} />}
</TabPanel>

【讨论】：