在打字稿中返回未定義的狀態

Question

我正在嘗試使用來自外部 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>
    </>
  );
}

Answer 1

addFavourite需要一個album參數。

嘗試這樣的事情：

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

Answer 2

您需要從輸入中提取值並將其作為參數提供給函數。 您可以為此使用受控輸入。 像這樣的東西：

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>
    </>
  );
}