Выводить сообщение если нет результатов. Если результаты есть - рендерить

Question

Помогите пожалуйста с логикой.

Стейт:

const [searchResults, setSearchResults] = useState([]);

Функция поиска:

  function handleSearch(keyword) {
    searchMovie(keyword)
      .then((res) => {
        setSearchResults(res.films);
      })
      .catch((err) => console.log(err));
  }

Стейт передаю в компонент Main

function Main({ searchResults, handleSearch }) {
  return (
    <Box pt='40px' pb='40px' flexBasis='auto' flexGrow={2} flexShrink={0}>
      <SearchForm handleSearch={handleSearch} />

      {searchResults.length ? (
        <Grid container spacing={2}>
          <Movies searchResults={searchResults} />
        </Grid>
      ) : (
        'Ничего не найдено'
      )}
    </Box>
  );
}

Я хочу следующее:

Если поиска еще не производилось то выводить сообщение: "Вы еще ничего не искали"
Если результатов нет - выводить сообщение "Ничего не найдено"
Если результаты есть, то рендерить их.

Проблема в том, что initial state пустой массив, поэтому при загрузке страницы сразу рендерится Ничего не найдено

Answer 1

Добавь стэйт загрузки

const [searchResults, setSearchResults] = useState([]);
const [loading, setLoading] = useState(true);

в функции загрузки фильмов меняй его на false когда фильмы подгрузились

 function handleSearch(keyword) {
    searchMovie(keyword)
      .then((res) => {
        setLoading(false)
        setSearchResults(res.films);
      })
      .catch((err) => console.log(err));
  }

потом в рендере можешь отображать контент в зависимости от условия

function Main({ searchResults, handleSearch, loading }) {
  return (
    <Box pt='40px' pb='40px' flexBasis='auto' flexGrow={2} flexShrink={0}>
      <SearchForm handleSearch={handleSearch} />

      {searchResults.length &&!loading (
        <Grid container spacing={2}>
          <Movies searchResults={searchResults} />
        </Grid>
      )} 
      {!searchResults.length &&!loading && 'Ничего не найдено'}
      {loading&&<Spiner />}
    </Box>
  );
}

БЛОГ НА HUSL

Выводить сообщение если нет результатов. Если результаты есть - рендерить

Ответы (1 шт):