微信小程序转换TARO时，针对回调函数，是否应该直接转换为箭头函数？

[Issacpeng]

问题描述
在将微信转换TARO，同时将TARO转换为快应用时，出现了错误提示：Error: 在回调函数使用从 props 传递的函数时，请把回调函数改造为箭头函数并一直使用 this 取值

复现步骤

1. 先将微信小程序转TARO
2. 再将TARO转换成快应用

`> 155 | success: function(res) {
| ^^^^^^^^^^^^^^^^

156 | if (res.data.res == 0) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
157 | if (res.data.data.content_list == null) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
158 | var tempTime =
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
159 | util.formatYear(new Date()) +
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
160 | '-' +
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
161 | util.formatMonth(new Date()) +
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
162 | '-' +
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
163 | (util.formatDay(new Date()) - 1)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
164 | that.onShow(tempTime)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
165 | var temp = tempTime.split('-')
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
166 | that.setData({
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
167 | selectDate: tempTime,
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
168 | Year: temp[0],
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
169 | Month: temp[1],
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
170 | Day: temp[2]
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
171 | })
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
172 | } else {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
173 | console.log(res.data.data)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
174 | for (var i = 0; i < res.data.data.content_list.length; i++) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
175 | if (res.data.data.content_list[i].category == 6) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
176 | res.data.data.content_list.splice(i, 1)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
177 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
178 | if (
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
179 | res.data.data.content_list[i].category == 2 &&
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
180 | res.data.data.content_list[i].serial_id > 0
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
181 | ) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
182 | if (res.data.data.content_list[i].serial_list != '') {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
183 | Taro.setStorage({
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
184 | key: res.data.data.content_list[i].serial_id,
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
185 | data: res.data.data.content_list[i].serial_list
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
186 | })
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
187 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
188 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
189 | if (i > 0) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
190 | if (res.data.data.content_list[i].author != '') {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
191 | var temp = res.data.data.content_list[i].author.user_name
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
192 | temp = temp.split(' ')
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
193 | if (temp.length > 1) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
194 | res.data.data.content_list[i].author.user_name =
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
195 | temp[0] + temp[1]
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
196 | } else {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
197 | res.data.data.content_list[i].author.user_name = temp[0]
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
198 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
199 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
200 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
201 | var sub_title = res.data.data.content_list[i].subtitle
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
202 | if (sub_title != '') {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
203 | var tmp_title = sub_title.split(':')
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
204 | res.data.data.content_list[i].subtitle = tmp_title[1]
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
205 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
206 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
207 | if (
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
208 | res.data.data.weather.date == util.formatTimeYms(new Date())
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
209 | ) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
210 | var dates = '今天',
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
211 | storeDate = util.formatTimeYms(new Date())
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
212 | } else {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
213 | var tmp = res.data.data.weather.date.split('-'),
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
214 | dates = tmp[1].slice(1, 2) + '月' + tmp[2].slice(1, 2) + '日',
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
215 | storeDate = res.data.data.weather.date
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
216 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
217 | that.setData({
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
218 | content: res.data.data.content_list,
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
219 | weather: res.data.data.weather,
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
220 | menu: res.data.data.menu,
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
221 | date: dates
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
222 | })
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
223 | Taro.setStorageSync(storeDate, res.data)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
224 | Taro.setStorageSync('currentDate', storeDate)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
225 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
226 | setTimeout(function() {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
227 | Taro.hideLoading()
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
228 | }, 1000)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
229 | } else {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
230 | Taro.showToast({
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
231 | title: '数据加载失败',
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
232 | icon: 'false',
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
233 | duration: 2000
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
234 | })
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
235 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
236 | }
| ^^^^^^^^^
237 | })
238 | }
239 | },
at Object.codeFrameError (D:\mywork\taro\packages\taro-transformer-wx\lib\src\utils.js:380:12)
at CallExpression (D:\mywork\taro\packages\taro-transformer-wx\lib\src\index.js:309:43)
at NodePath._call (D:\mywork\taro\packages\taro-transformer-wx\node_modules\babel-traverse\lib\path\context.js:76:18)
at NodePath.call (D:\mywork\taro\packages\taro-transformer-wx\node_modules\babel-traverse\lib\path\context.js:48:17)
at NodePath.visit (D:\mywork\taro\packages\taro-transformer-wx\node_modules\babel-traverse\lib\path\context.js:105:12)
at TraversalContext.visitQueue (D:\mywork\taro\packages\taro-transformer-wx\node_modules\babel-traverse\lib\context.js:150:16)
at TraversalContext.visitSingle (D:\mywork\taro\packages\taro-transformer-wx\node_modules\babel-traverse\lib\context.js:108:19)
at TraversalContext.visit (D:\mywork\taro\packages\taro-transformer-wx\node_modules\babel-traverse\lib\context.js:192:19)
at Function.traverse.node (D:\mywork\taro\packages\taro-transformer-wx\node_modules\babel-traverse\lib\index.js:114:17)
at NodePath.visit (D:\mywork\taro\packages\taro-transformer-wx\node_modules\babel-traverse\lib\path\context.js:115:19)`

期望行为
转换正常

报错信息

报错如下：

系统信息

• 操作系统: [Windows 10]
• Taro 版本 [v.1.3.18]
• Node.js 版本 [v12.10.0]
• 报错平台 [quickapp]

补充信息

解决思路：看起来是父子类传值时，回调函数中this作用域不同造成的，应该是TARO的转换规则要求，是否应该在微信转TARO时，就直接转换为箭头函数？

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Issacpeng]

@luckyadam 深入跟踪了一下，现在的处理方式会直接抛出异常，对于回调函数 ，在babel解析语法时 产生的虚拟语法树中，可以查询到函数类型，会标明是回调类型，但函数中的变量也需要同步切换为this. 调用，不知道是否 是因为没有统一规则 导致难度比较大，暂未实现？
但对于回调的处理 可以直接把函数 处理成 带=> 格式，是否需要做呢？ 只解决了一半的问题。