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

Question

我一直收到此错误我正在尝试显示 none 图像直到它加载，但我收到 React Limits the number of renders to prevent infinite loop。如果您知道更好的方法，请告诉我。我希望图像在加载时不显示...正在加载图像非常丑陋，它只发生在使用 .Png 文件的 Mobile Im 上，我应该转换为 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')}}

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

AnyOne know why i keep getting This error when i try to set state on load

reactjs

error-handling

onload