reactjs - 将获取功能放在单独的组件中

Question

我正在尝试从以下组件中取出 fetchImages 函数并将其放入一个新组件中:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import UnsplashImage from './UnsplashImage';

const Collage = () => {
  const [images, setImages] = useState([]);
  const [loaded, setIsLoaded] = useState(false);

  const fetchImages = (count = 10) => {
    const apiRoot = 'https://api.unsplash.com';
    const accessKey =
      '<API KEY>';

    axios
      .get(`${apiRoot}/photos/random?client_id=${accessKey}&count=${count}`)
      .then(res => {
        console.log(res);
        setImages([...images, ...res.data]);
        setIsLoaded(true);
      });
  };

  useEffect(() => {
    fetchImages();
  }, []);

  return (
            <div className="image-grid">
              {loaded
                ? images.map(image => (
                    <UnsplashImage
                      url={image.urls.regular}
                      key={image.id}
                      alt={image.description}
                    />
                  ))
                : ''}
            </div>
  );
};

export default Collage;

为此，我创建了一个名为 api.js 的新组件，从上面的组件中删除了整个 fetchImage 函数并将其放入 api.js 像这样:

api.js

    const fetchImages = (count = 10) => {
        const apiRoot = 'https://api.unsplash.com';
        const accessKey =
          '<API KEY>';

        axios
          .get(`${apiRoot}/photos/random?client_id=${accessKey}&count=${count}`)
          .then(res => {
            console.log(res);
            setImages([...images, ...res.data]);
            setIsLoaded(true);
          });
      };

export default fetchImages;

接下来，我从 api.js 中获取 setIsLoaded(true); 并将其粘贴到 Collage 组件中，如下所示:

useEffect(() => {
    fetchImages();
    setIsLoaded(true);
  }, []);

现在我可以将 fetchImages 导入到 Collage 组件中。

但是，我不知道我应该如何处理 fetchImages 函数中的这一行？这需要转到 Collage 组件，但 res.data 未在 Collage 组件内定义。

setImages([...images, ...res.data]);

我该如何处理？

Answer 1

有很多方法可以做到这一点，但在您的情况下。你应该使用

 const fetchImages = (afterComplete, count = 10) => {
  const apiRoot = 'https://api.unsplash.com';
  const accessKey = '<API KEY>';

  axios
    .get(`${apiRoot}/photos/random?client_id=${accessKey}&count=${count}`)
    .then(res => {
      console.log(res);
      afterComplete(res.data);
    });
};

export default fetchImages;

在您的 Collage 组件中:

const afterComplete = (resData) =>{
  setImages([...images, ...resData]);
  setIsLoaded(true);
}

useEffect(() => {
  fetchImages(afterComplete);
}, []);