如何從我的 nasa api 獲取所有圖像 url 並將它們添加到圖像滑塊中

Question

這是我的imageslider 組件，帶有按鈕next 和previous 我需要一些幫助，如何獲取單個img_src 值並將它們添加到另一個數組中，然后在我的圖像滑塊中使用它們。

我歡迎與我的方法相對應的每一個解決方案

const ImageSlider = () => {
  const dispatch = useDispatch();
  const ImageList = useSelector((state) => state.ImageList);

  const { loading, error, Images } = ImageList;

  useEffect(() => {
    dispatch(ListImages());
  }, [dispatch]);

  var items = [Images.photos];

  console.log(Images);

  const classes = useStyles();

  function Item(props) {
    return (
      <Paper>
        {props.item.map(data => (
         <img src={data.img_src} />
        ))}
      

        {({ onClick, className, style, next, prev }) => {
          return (
            <Button onClick={onClick} className={classes.button} style={style}>
              {next && "Next"}
              {prev && "Previous"}
            </Button>
          );
        }}
      </Paper>
    );
  }
 return (
    <>
      {loading ? (
        <Loader />
      ) : error ? (
        <h1>{error}</h1>
      ) : (
        <Carousel>
          {items.map((item, i) => (
            <Item key={i} item={item} />
          ))}
        </Carousel>
      )}
    </>
  );
};

export default ImageSlider;
```

Answer 1

首先，您應該將 Item 組件移出 ImageSlider。 每次渲染都會重新定義它。 您可以使用 localState 來跟蹤索引。

const useImageIndexer = (maxIndex) => {
    const [index, setIndex] = useState(0);
    const nextImage = () => {
        setIndex((current) => Math.min(maxIndex, current + 1));
    };
    const prevImage = () => {
        setIndex((current) => Math.max(0, current - 1));
    };
    return [index, nextImage, prevImage];
}

然后在滑塊內部使用

const ImageSlider = () => {
      const dispatch = useDispatch();
      const ImageList = useSelector((state) => state.ImageList);
      const photos = ImageList.Images.photos;
      const [index, nextImage, prevImage] = useImageIndexer(photos.length);
      const currentPhoto = photos[index];

     // Further down in the code
    
     if(loading) {
         return (<Loader />);
     }
     if (error) {
         return (<div>Oh no!</div>);
     }

     return (<div>
       <img src={img.src} />
       <button onClick={prevImage}>Previous</button>
       <button onClick={nextImage}>Next</button>
      </div>);

看起來您正在將聽起來像一個數組的照片包裝在另一個數組中，這看起來不正確。

  var items = [Images.photos];