为了账号安全,请及时绑定邮箱和手机立即绑定

学习React实战-打造画廊应用学习中遇到的问题(react组件初始化时数组生成的问题)

问题描述如下: 学习React实战-打造画廊应用课程,然后我就用create-react-app构建了项目,项目地址

https://github.com/joyjoe/gallery-by-react

现在遇到的问题是这样的,项目启动时,需要设置所有图片的初始位置状态信息。这个信息应该是一个数组,数组中的每一项都应该是一个对象,包含一个position属性。但是数组的长度是根据图片的个数确定的。于是我在gallery组件的构造函数中使用了for循环来创建数组。代码如下:

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文件中加载而成的一个数组对象。

运行之后,我发现arr打印出来时,其中会有几个元素又是一个array类型对象。

http://img1.sycdn.imooc.com//59f999ea0001938b02260337.jpg



我就很纳闷了。这是为什么呢?为什么这里会出现数组的嵌套呢?


自己对比了一部分代码,发现可能的原因应该是我在render函数中操作了this.state.imagePosDataArr对象,然后就会发现arr数组有嵌套。 于是,我在render函数中删掉与state有关的代码,再看结果,发现arr数组没有嵌套了。 不知道这是为什么?

http://img1.sycdn.imooc.com//59f99ba70001cee506930318.jpg


正在回答

3 回答

你定义了 pos 参数,使用的代码在哪里?没有使用的代码吗?可否贴一下执行出错的代码,而不是注释后的。

0 回复 有任何疑惑可以回复我~

找到原因了,真是坑呀。在 placeImage()方法中操作数组时,用splice方法返回的是数组,然后没注意,就直接将数组又用splice方法给塞进去了。这个地方应该是把前面的数组给展开。

0 回复 有任何疑惑可以回复我~

http://img1.sycdn.imooc.com//59f9ba0f0001a9f706370338.jpg

就是如图所示一样的调用,我在render函数中的forEach遍历回调中获取了state,然后将state值传递给子组件ImageFigure的pos属性中。

问题就出在这里,我前面在构造函数中生成的初始化数据数组arr里面有嵌套数组,不知道是为什么造成的,感觉和setState是异步实现的机制有关,每次都是数组中某个索引对应的值被嵌入到另一个数组中了。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
React实战--打造画廊应用(上)
  • 参与学习       57313    人
  • 解答问题       273    个

颠覆式前端UI开发框架 React,打造图片画廊实践案讲解

进入课程

学习React实战-打造画廊应用学习中遇到的问题(react组件初始化时数组生成的问题)

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信