在 React 中运行搜索后如何显示“未找到任何内容”

Question

该消息在搜索之前显示。找不到结果后无法理解如何显示：

import { useState, lazy, useEffect } from 'react';
import * as movieAPI from '../../../services/movie-api';
import { Gallery } from 'components/Gallery/Gallery';

import { SearchForm, Button, Label, Input } from './MoviesPage.styled';
import { useSearchParams, useLocation } from 'react-router-dom';

const NotFoundPage = lazy(() => import('../NotFound/NotFoundPage.js'));

export default function MoviesPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const [data, setData] = useState(null);
  // eslint-disable-next-line no-unused-vars
  let [_, setSearchParams] = useSearchParams();
  const handleInputChange = e => {
    setSearchQuery(e.currentTarget.value);
  };
  const { search } = useLocation();

  useEffect(() => {
    if (!search) {
      return;
    }
    movieAPI.fetchSearch(search.slice(7)).then(setData);
  }, [search]);

  const handleSubmit = e => {
    e.preventDefault();
    const normalizeSearchQuery = searchQuery.trim().toLowerCase();
    if (!normalizeSearchQuery) {
      return;
    }
    movieAPI.fetchSearch(normalizeSearchQuery).then(setData);
    setSearchParams(`query=${normalizeSearchQuery}`);
    // setSearchQuery('');
  };

  return (
    <>
      <SearchForm onSubmit={handleSubmit}>
        <Input
          type="text"
          name="searchQuery"
          autoComplete="off"
          autoFocus
          placeholder="Search movies"
          value={searchQuery}
          onChange={handleInputChange}
        />
        <Button type="submit">
          <Label>Search</Label>
        </Button>
      </SearchForm>

           {data?.results.length > 0 ? <Gallery data={data} /> : <NotFoundPage />}
    </>
  );
}

import { Link } from 'react-router-dom';

function NotFoundPage() {
  return (
    <div>
      <h2> Results not found :(</h2>
      <p>
        <Link to="/">Back</Link>
      </p>
    </div>
  );
}

export default NotFoundPage;

控制台截图：http://joxi.ru/MAjPxOGiYdBLDm

我试图创建一个带有电影搜索器按钮的页面。但是 NotFoundPage 函数在需要运行之前正在运行。那么，我做错了什么以及如何解决它？

Answer 1

只呈现搜索结果后数据已被提取。换句话说，等到data 是一个非空值。

例子：

1. {data && data.results?.length ? <Gallery data={data} /> : <NotFoundPage />}
   

2. {data
     ? data.results?.length ? <Gallery data={data} /> : <NotFoundPage />
     : null
   }
   

3. {data
     ? data.results?.length ? <Gallery data={data} /> : <NotFoundPage />
     : <div>Searching...</div>
   }