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

Question

Let me explain what I want to achieve?

• This is the fetched data to get the image links and save it to setImageLinkData state which is over 100,000 links
• Since, I want to do something after the imageLinkData state is updated so, I use the useEffect hook to do it

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])

• I tested the link if the image exists with the two function one for imageLink and another for additionalImageLink
• After I test the link I get validated links from the callback function and save it to setImageLink and setAdditionalImageLink state respectively.

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

• So, what happening in my code next is when I try to access the imageLink state(not from the json data) and additionalImageLink state(not from the json data) I only get one or two value

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

• The result

Answer 1

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

In this setImageLink(resultImg) and setAdditionalImageLink(resultImg) , you are setting only the last value that is available in the json data.

Shouldn't it be pushing the value to the imageLink and additionalImageLink array?

Like setImageLink([...imageLink, resultImg]) ?