[想知道发生了什么] react 的 constructor、componentWillMount、componentDidMount 时期中该 jsonarray 有值，但是.length 的输出 0，[下标]为 undefined

[devwolf]

因为 react-photo-view 插件无法提供水印功能，又没法子暴露 img 元素， 所以笔者用了 https://blog.csdn.net/qq_35306736/article/details/106522144 的法子，通过 url 获得 base64 用 img 接受绘制在 canvas 添加水印 toBlob 转成 blob 再 URL.createObjectURL 转成 DOMString，如此就纯前端将 url 变成一个带有水印的新 src 可用值。

然后出现了下述问题: 上述水印操作提到了 constructor 时期，
constructor 、componentWillMount 、componentDidMount 都可以打印出这个 JSONarray,形如 console.log(this.state.photoImages)的值为 [{intro: "以上证照均由商家提供，信息以证照所示为准", src: "blob:http://192.168.56.1:3000/7eb8a3a8-9c80-4b09-a620-653b04762620"}]
问题发生了，
this.state.photoImages.length 的值一直是 0，虽然 this.state.photoImages 是有值的。
如果在页面设置一个交互按钮，开关一个新 state 来判断渲染 this.state.photoImages 给 react-photo-view 插件是生效的。浏览器的 react developer tools 插件也可以从该页面组件的 state 中查得 photoImages 有值（不然上面的交互按钮也不会成功了）

[siyushin]

你的 photoimages 是异步才有值的吧。

[theprimone]

说这么多也没用，还是整个在线 demo 实在

[devwolf]

@siyushin 感谢提醒。
种种糟糕的操作与理解导致了这个问题——包括自己对异步的错乱使用，更主要的是（个人猜测式总结）：太过相信浏览器控制台的打印顺序(下图二、图三，图三能正常运行)
图一:<img src='http://i1.fuimg.com/704774/b71cd850a162e117.png'>
图二:<img src='http://i2.tiimg.com/704774/9eb2296d751f2b7b.png'>
图三:<img src='http://i2.tiimg.com/704774/e26bab2ed5690340.png'>

[devwolf]

@theprimone /捂脸 勉强算搞定了（未精确定位原因但是解决效果已经达到），不然真要 demo 了

[devwolf]

。。。没怎么发过图不知道回复里怎么整，
图一:http://i1.fuimg.com/704774/b71cd850a162e117.png
图二:http://i2.tiimg.com/704774/9eb2296d751f2b7b.png
图三:http://i2.tiimg.com/704774/e26bab2ed5690340.png

[rioshikelong121]

jsbin 搞个 demo 兄弟

[devwolf]

@rioshikelong121 jsrun 的有个 demo （指水印功能）
http://jsrun.net/9t2Kp

[devwolf]

v 站氪了 30，发现能存 49 张，上面的图片转存一下（虽然本帖价值不高。。。），才发现现在贴图库只给存 7 天

[devwolf]

最终看起来是用 async/await 包起来解决的，今天有同事遇到了类似的问题，回头看了一下。这类问题关键字好像是“js 数组长度为 0 但是有元素”