.map не является функцией. карта через массив объектов. (React Hooks)

Question

Я создаю простое приложение, которое ищет фильмы из базы данных mov ie. Входные данные для поиска успешно извлекают и устанавливают apiData для фильмов с тем же значением.

Я изо всех сил пытаюсь отобразить и отобразить название фильмов и получить ошибку apiData.map не является функцией

Данные - это данные состояния - это массив объектов.

Я хочу получить доступ к заголовку из объектов, например, {title: 'mad max'} и отобразить его.

Вот код

const SearchPage = () => {
  const [apiData, setApiData] = useState({ results: {} });
  const [searched, setSearched] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleSearch = (event) => {
    setSearched(event.target.value);
  };

  useEffect(() => {
    setLoading(true);
    fetchSearched(searched).then((data) => setApiData(data.results));
    setLoading(false);
  }, [searched]);

  return (
    <>
      <form className='search-form'>
        <input
          type='text'
          placeholder='search for a film'
          onChange={(event) => handleSearch(event)}
        />
      </form>
       // code below causes error when un-commented
      {/* <SearchList apiData={apiData} /> */}
    </>
  );
};

const SearchList = ({ apiData }) => {
  return (
    <div className='search-list'>
      SEARCH LIST
      <ul>
        {apiData.map((movie) => {
          return <SearchItem movie={movie} key={movie.id} />;
        })}
      </ul>
    </div>

const SearchItem = ({ movie }) => {
  return (
    <div className='search-item'>
      <li>{movie.title}</li>
    </div>

Отображение данных из API постоянно сбивает меня с толку, поэтому любые разъяснения приветствуются.

Answer 1

Поскольку вы устанавливаете начальные данные apiData является объектом. Пожалуйста, укажите мой код:

const SearchPage = () => {
  const [apiData, setApiData] = useState([]); // change to array
  const [searched, setSearched] = useState(""); // i think it is string
  const [loading, setLoading] = useState(false);

  const handleSearch = (event) => {
    setSearched(event.target.value);
  };

  useEffect(() => {
    if(!searched) return
    setLoading(true);
    fetchSearched(searched).then((data) => {
       setApiData(data.results)
       setLoading(false);
    });

  }, [searched]);

  return (
    <>
      <form className='search-form'>
        <input
          disabled={loading}
          type='text'
          placeholder='search for a film'
          onChange={(event) => handleSearch(event)}
        />
      </form>
       // code below causes error when un-commented
       <SearchList apiData={apiData} />
    </>
  );
};

const SearchList = ({ apiData = [] }) => {
  return (
    <div className='search-list'>
      SEARCH LIST
      <ul>
        {apiData.map((movie) => {
          return <SearchItem movie={movie} key={movie.id} />;
        })}
      </ul>
    </div>

Answer 2

ваша первая строка const [apiData, setApiData] = useState({ results: {} }); устанавливает объект в состояние. Между тем, ваш ответ API устанавливает массив в состояние. Я думаю, что вы получаете ошибку из-за того, как вы читаете начальное состояние, а не из-за вызова API.

Я думаю, что если вы просто измените это значение на const [apiData, setApiData] = useState([]);, оно будет работать. Счастливого кодирования