任何人都知道为什么我在尝试设置加载状态时不断收到此错误

Question

我不断收到此错误我试图在加载之前不显示图像，但我得到 React 限制渲染数量以防止无限循环。如果您知道更好的方法，请告诉我。我希望图像在加载时不显示...加载图像非常难看，而且它只发生在 Mobile Im 上使用 .Png 文件我应该转换为 svg 以便加载更快吗？

        Too many re-renders. React limits the number of renders to prevent an infinite loop.
        ▶ 2 stack frames were collapsed.
        Spinner
        C:/Users/Test/Documents/GitHub/Ecommerce-Store/src/components/Spinner.jsx:26
        23 | return (
        24 |   <div style={{ height: '100vh' }}>
        25 |     <img
        > 26 |       onLoad={setloaded('true')}
            | ^  27 |       id="preloader"
        28 |       src={preloader}
        29 |       alt="loading..."

        import React, { useEffect, useState } from 'react';
        import { isAndroid, isIOS } from 'react-device-detect';
        import android from '../spinners/androidlogo.png';
        import apple from '../spinners/Applelogo.png';
        import spinner from '../spinners/VHUBLogospin.gif';

        const Spinner = props => {
        const [preloader, setpreloader] = useState(null);
        const [loaded, setloaded] = useState(false)
        // const productConsumer = useContext(ProductContext);
        // // const { showSpinner } = productConsumer;
        useEffect(() => {
            if (isIOS) {
            setpreloader(apple);
            } else if (isAndroid) {
            setpreloader(android);
            } else {
            setpreloader(spinner);
            }
            // showSpinner(preloader);
        }, []);

        return (
            <div style={{ height: '100vh' }}>
            <img
                onLoad={setloaded('true')}
                id="preloader"
                src={preloader}
                alt="loading..."
                style={{
                width: '200px',
                margin: 'auto',
                display: 'block',
                marginTop: '3%',
                paddingTop: '25vh',

                }}
                className={!loaded ? 'display-none' : '' }
            />
            </div>
        );
        };

        export default Spinner;

Answer 1

试试这个onLoad={() => {setloaded('true')}}