Состояние, возвращающее неопределенное значение в машинописном тексте

Я пытаюсь изменить состояние компонента с данными из внешнего API. Состояние состоит в том, чтобы добавить компонент в избранное, но возвращает неопределенное значение. Я уже использую функции стрелок, и .bind() тоже не работает. Что мне здесь не хватает?

Компонент библиотеки:

export default function LibraryComponent() {
  const [albums, setAlbums] = useState<any[]>([]);
  const [albumTitle, setAlbumTitle] = useState<any[]>([]);
  const [photoUrl, setPhotoUrl] = useState();
  const [favourite, setFavourite] = useState<any[]>([]);

  //FETCH DATA
  const fetchData = () => {
    const getAlbums = "https://jsonplaceholder.typicode.com/albums?_limit=20";
    const getPhotos =
      "https://627ed423b75a25d3f3bd811f.mockapi.io/api/photos/1"; //random number here
    const albums = axios.get(getAlbums).then((res) => {
      setAlbums(res.data);
    });
    const photoUrl = axios.get(getPhotos).then((res) => {
      setPhotoUrl(res.data.images);
    });

  };
  const addFavourite = (album: []) => {
    const favouriteList = [...favourite, album];
    setFavourite(favouriteList);
  };

  return (
    <>
      <div className = "container-fluid w-50">
        <div className = "row">
          {albums.map((album) => (
            <div key = {album.id} className = "col-lg-2 col-sm-6">
              <div className = "col-lg-12 col-sm-6">
                <div className = "thumbnail img-responsive">
                  <AlbumComponent
                    title = {album.title}
                    image = {photoUrl}
                    handleFavouriteClick = {addFavourite}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

Компонент альбома:

type Meta = {
  title: any;
  image: any;
  handleFavouriteClick: any;
};

export default function AlbumComponent(props: Meta) {
  return (
    <>
      <img src = {props.image} alt = "" className = "img-fluid img-thumbnail" />
      <p>{props.title}</p>
      <div onClick = {() => props.handleFavouriteClick()}>
        <i className = "fa-regular fa-heart"></i>
      </div>
    </>
  );
}

Состояние, возвращающее неопределенное значение в машинописном тексте

Почему ты звонишь axios.get(getAlbums) дважды?

Jared Smith 16.05.2022 15:10

Почему это вызывает беспокойство? В любом случае я отредактировал код

Henrique Guimarães 16.05.2022 15:35

Зачем вам вызывать один и тот же API дважды? Специально для того, что появляются разные данные? Я предположил, что это опечатка, и должен был быть другой вызов API.

Jared Smith 16.05.2022 16:05

На самом деле, используя типы для ваших данных и реквизитов, вы поймали бы, что вы не вызываете обработчик с правильными параметрами. Я настоятельно рекомендую использовать типы, если вы собираетесь использовать Typescript (т. е. избегать any).

crashmstr 16.05.2022 16:07
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
40
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

addFavourite ожидает параметр album.

Попробуйте что-то вроде этого:

<AlbumComponent
  title = {album.title}
  image = {photoUrl}
  handleFavouriteClick = {() => addFavourite(album)}
/>

Выдает мне "Слишком много повторных рендеров". ошибка.

Henrique Guimarães 16.05.2022 15:33

Это было все же. Я исправил ошибку «Слишком много повторных рендеров», обернув handleFavouriteClick = {addFavourite} функцией стрелки.

Henrique Guimarães 16.05.2022 15:58

Вам нужно извлечь значение из ввода и предоставить его в качестве параметра функции. Для этого можно использовать контролируемый ввод. Что-то вроде этого:

export default function AlbumComponent(props: Meta) {
  const [value, setValue] = React.useState()

  return (
    <>
      <img src = {props.image} alt = "" className = "img-fluid img-thumbnail" />
      <p>{props.title}</p>
      <div onClick = {() => props.handleFavouriteClick(value)}>
        <i className = "fa-regular fa-heart" value = {value} onChange = {setValue}></i>
      </div>
    </>
  );
}

Другие вопросы по теме