Блог

У меня есть приложение 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>
 

но это не является условным показом результатов.

Вам нужно передать searchResults объекты функции identifySearchResults , чтобы она вернула true или false .

Это должно работать так:

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