为什么 setData 中的对象不是数据中的数组？

Question

 const [ data, setData ] = useState( [] );

useEffect( () => {
        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>" ) ) {

                    let onlyData = dataString.substring( 16 );
                    let pairedData = onlyData.split( "https://" );
                    pairedData.splice( 0, 1 );

                    pairedData.map( ( group ) => {
                        let urls = group.split( " " )[0];
                        const comments = group.replace( urls, " " );

                        setData( {
                            item: {
                                url: "https://" + urls,
                                comment: comments
                            }
                        } );
                    } );
                } else {
                    console.log( "NOPE" );
                }
            } else {
                console.log( "We could not find any data" );
            }
        } );
    }, [] );

我有这个代码。

我想要什么：data = [obj1, obj2, obj3]。

我得到：数据 = obj1、obj2、obj3。

我希望对象位于数据数组中，但此刻，数据变成了一个对象。所以当我 console.log(data) 我得到 3 个单独的对象。我希望数据是一个数组，里面有这 3 个单独的对象。

Answer 1

因为您正在将数据设置为对象。而是将其设置为数组并使用扩展运算符[...someArray] 以避免直接状态突变：

const urls = group.split( " " )[0];
const comments = group.replace( urls, " " );
const newObj = { url: "https://" + urls , comment: comments }
setData([...data, newObj])

更好的方法是不要在循环中设置状态（因为每次您在循环中设置数据时，您的组件都会重新渲染，而是构建一个 newState，然后在循环之后设置它：

const newArray = pairedData.map( ( group ) => {
    const urls = group.split( " " )[0];
    const comments = group.replace( urls, " " );
    return { url: "https://" + urls , comment: comments }
});
setData([...data, ...newArray])

同样使用map()而不使用它的数组或者每个返回值都是一个反模式：

由于 map 构建了一个新数组，因此在您不使用时使用它 返回的数组是反模式；使用 forEach 或 for-of 代替。 您不应该使用地图的标志：

A) 你没有使用它返回的数组，和/或

B) 你没有从回调中返回值。

Mozilla docs