如何在反应中获取大型 API 数据并将请求发送回服务器？

Question

让我解释一下我想要实现的目标？

• 这是获取图像链接并将其保存到超过 100,000 个链接的setImageLinkData状态的获取数据
• 因为，我想在imageLinkData状态更新后做一些事情，所以我使用 useEffect 钩子来做

const [ imageLinkData, setImageLinkData ] = useState([]);
const [ imageLink, setImageLink ] = useState([]);
const [ additionalImageLink, setAdditionalImageLink ] = useState([]);

useEffect(() => {
        const checkLink = async () => {
            if (imageLinkData.length > 0) {
                checkMainImage(imageLinkData, (resultImg) => setImageLink(resultImg)); // test main image link
                checkAdditionalImage(imageLinkData, (resultImg) => setAdditionalImageLink(resultImg)); // test additional image link
                const response = await getSuggList();
            }
        }
        checkLink();
    }, [imageLinkData])

• 如果图像存在，我测试了链接，两个函数一个用于imageLink ，另一个用于附加ImageLink
• 在我测试链接后，我从回调函数中获得了经过验证的链接，并将其分别保存到setImageLink和setAdditionalImageLink状态。

 const checkMainImage = (linkArray, callback) => {
        linkArray.map(element => {
            const img = new Image();
            img.src = element.imageLink;
            img.onload = () => {
                setImageLink(element.imageLink);
                callback(element.imageLink);
            };
            img.onerror = () => {
                callback('donot');
            };
        });
    }

const checkAdditionalImage = (linkArray, callback) => {
        linkArray.map(element => {
            element.additionalImageLink.map(addImage => {
                const img = new Image();
                img.src = addImage;
                img.onload = () => {
                    return callback(addImage);
                };
                img.onerror = () => {
                    return callback('donot');
                };
            })
        });
    }

• 因此，接下来在我的代码中发生的事情是，当我尝试访问imageLink状态（不是来自 json 数据）和AdditionalImageLink状态（不是来自 json 数据）时，我只得到一两个值

useEffect(() => {
        // if (imageLink.length > 0 || additionalImageLink.length > 0)
            console.log(imageLink);
    }, [imageLink])

• 结果

Answer 1

checkMainImage(imageLinkData, (resultImg) => setImageLink(resultImg)); // test main image link
checkAdditionalImage(imageLinkData, (resultImg) => setAdditionalImageLink(resultImg)); // test additional image link

在此setImageLink(resultImg)和setAdditionalImageLink(resultImg)中，您仅设置 json 数据中可用的最后一个值。

它不应该将值推送到imageLink和additionalImageLink数组吗？

像setImageLink([...imageLink, resultImg]) ？