學(xué)習(xí)React實戰(zhàn)-打造畫廊應(yīng)用學(xué)習(xí)中遇到的問題(react組件初始化時數(shù)組生成的問題)
問題描述如下： 學(xué)習(xí)React實戰(zhàn)-打造畫廊應(yīng)用課程，然后我就用create-react-app構(gòu)建了項目，項目地址
https://github.com/joyjoe/gallery-by-react
現(xiàn)在遇到的問題是這樣的，項目啟動時，需要設(shè)置所有圖片的初始位置狀態(tài)信息。這個信息應(yīng)該是一個數(shù)組，數(shù)組中的每一項都應(yīng)該是一個對象，包含一個position屬性。但是數(shù)組的長度是根據(jù)圖片的個數(shù)確定的。于是我在gallery組件的構(gòu)造函數(shù)中使用了for循環(huán)來創(chuàng)建數(shù)組。代碼如下：
let?len?=?imagesData.length;
var?arr?=?new?Array(len);
for(var?i?=0;?i?<?len?;?i++){
//?arr.push({"position":{}});
arr[i]?=?{"position":{}};
}
console.log("arr");
console.log(arr);
this.state={
"imagePosDataArr":?arr
};其中 imagesData是從Json文件中加載而成的一個數(shù)組對象。
運(yùn)行之后，我發(fā)現(xiàn)arr打印出來時，其中會有幾個元素又是一個array類型對象。
我就很納悶了。這是為什么呢？為什么這里會出現(xiàn)數(shù)組的嵌套呢？
自己對比了一部分代碼，發(fā)現(xiàn)可能的原因應(yīng)該是我在render函數(shù)中操作了this.state.imagePosDataArr對象，然后就會發(fā)現(xiàn)arr數(shù)組有嵌套。 于是，我在render函數(shù)中刪掉與state有關(guān)的代碼，再看結(jié)果，發(fā)現(xiàn)arr數(shù)組沒有嵌套了。 不知道這是為什么？
2017-11-01
你定義了 pos 參數(shù)，使用的代碼在哪里？沒有使用的代碼嗎？可否貼一下執(zhí)行出錯的代碼，而不是注釋后的。
2017-11-01
找到原因了，真是坑呀。在 placeImage()方法中操作數(shù)組時，用splice方法返回的是數(shù)組，然后沒注意，就直接將數(shù)組又用splice方法給塞進(jìn)去了。這個地方應(yīng)該是把前面的數(shù)組給展開。
2017-11-01
就是如圖所示一樣的調(diào)用，我在render函數(shù)中的forEach遍歷回調(diào)中獲取了state，然后將state值傳遞給子組件ImageFigure的pos屬性中。
問題就出在這里，我前面在構(gòu)造函數(shù)中生成的初始化數(shù)據(jù)數(shù)組arr里面有嵌套數(shù)組，不知道是為什么造成的，感覺和setState是異步實現(xiàn)的機(jī)制有關(guān)，每次都是數(shù)組中某個索引對應(yīng)的值被嵌入到另一個數(shù)組中了。