为什么 React Component 渲染两次

Question

我有这个代码：

const fetchRequest = useCallback( () => {
        setIsLoading( true );
        axios( {
            method: "GET",
            url: "https://bouvet.guru/rekrytering_flera.php"
        } ).then( ( response ) => {
            if ( response.data.indexOf( "https://" ) !== -1 ) {
                let splittedArray = response.data.split( "Data:" );
                let dataString = splittedArray[1];

                if ( dataString.includes( "<URL kommentar>" ) ) {

                    dataString.substring( 16 );
                    let pairedData = dataString.split( "http" );
                    pairedData.splice( 0, 1 );

                    const finalArray = pairedData.map( ( group ) => {
                        const url = group.split( " " )[0];
                        const comment = group.replace( url, "" );

                        // Return an object with the paired properties. ID is not optimal to be Math.random(), this is for demonstration purpose.
                        return { url: "http" + url, comment, id: Math.random() };

                    } );

                    setData( [ ...data, ...finalArray ] );
                    setIsLoading( false );
                } else {
                    console.log( "NOPE" );
                }
            } else {
                console.log( "We could not find any data" );
                setIsLoading( false );
            }
        } );
    }, [] );

    useEffect( () => {
        fetchRequest();
        setInterval( () => {
            fetchRequest();
        }, 30000 );
    }, [] );


    console.log( data );

这只是一个简单的 useEffect axios 调用，我在其中收到一个字符串，然后将其设置为状态，然后将其记录到控制台。

我总是得到 2 个相同的数组。

（我现在知道它是一个useCallback，但是在整个代码中它只是一个useEffect时遇到了同样的问题。

这个组件是独立的。

Answer 1

你可以这样做：

const fetchRequest = () => {
        setIsLoading( true );
        axios( {
            method: "GET",
            url: "https://bouvet.guru/rekrytering_flera.php"
        } ).then( ( response ) => {
            if ( response.data.indexOf( "https://" ) !== -1 ) {
                let splittedArray = response.data.split( "Data:" );
                let dataString = splittedArray[1];

                if ( dataString.includes( "<URL kommentar>" ) ) {

                    dataString.substring( 16 );
                    let pairedData = dataString.split( "http" );
                    pairedData.splice( 0, 1 );

                    const finalArray = pairedData.map( ( group ) => {
                        const url = group.split( " " )[0];
                        const comment = group.replace( url, "" );

                        // Return an object with the paired properties. ID is not optimal to be Math.random(), this is for demonstration purpose.
                        return { url: "http" + url, comment, id: Math.random() };

                    } );

                    setData( [ ...data, ...finalArray ] );
                    setIsLoading( false );
                } else {
                    console.log( "NOPE" );
                }
            } else {
                console.log( "We could not find any data" );
                setIsLoading( false );
            }
        } );
    };

    useEffect( () => {
        fetchRequest();
        const interval = setInterval( () => {
            fetchRequest();
        }, 30000 );
        return ()=>{clearInterval(interval);}
    }, [] );


    console.log( data );

Answer 2

很可能第二次渲染是由setIsLoading( false )触发的