免费可商用图片素材网站wordpress导航栏下拉菜单

开发需求：有一个字符串数组，可以通过弹框编辑其中的某个字符串，编辑完成后更新数组并持久化这个数组。

这个需求算是很简单，很常见的需求了。但是，开发过程中却遇到了一个不小的难题。

我的数组内容需要在组件中显示，数据更新，页面刷新。所以，用@state装饰器修饰数组。

然后，点击某个字符串内容弹出customDialog，用户修改，确认后将修改的字符串回传，同时，修改数组的内容，持久化数组。一番操作猛如虎，结果一看直接崩溃

而且这个崩溃从以上日志是真看不出来为啥。不断的删减代码发现一个官方问题。@state修饰的属性，在customDialog回调中利用用户首选项持久化会崩溃，至于为啥，估计也就官方知道。

结果有了，贴一下我的崩溃示例代码

import Prompt from '@system.prompt'
import dataPreferences from '@ohos.data.preferences'@Entry
@Component
struct Index {@State currentTitle: string = '点击我'//需要持久化的数据@State dataArray: string[] = ['654','357','65456','35723']private templateDataManager = new BarrageTemplateModel()//自定义弹框editDialogController: CustomDialogController = new CustomDialogController({builder: CustomEditDialog({confirm: this.onConfirm.bind(this),currentTitle:$currentTitle}),autoCancel: false,alignment: DialogAlignment.Center,offset: { dx: 0, dy: -20 },gridCount: 4,customStyle: false})//弹框修改完成回调onConfirm() {this.dataArray.splice(0,1)     
//这里会导致崩溃   
this.templateDataManager.saveTemplateData(getContext(this),'kUserTemplateKey_HanHua',copy)}build() {Row() {Column() {Text(this.currentTitle).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {//这样直接操作，不牵扯dialog就不崩溃// this.dataArray.splice(0,1)// this.templateDataManager.saveTemplateData(getContext(this),'kUserTemplateKey_HanHua',this.dataArray)// Prompt.showToast({message:'点击了'})//这样会崩溃if (this.editDialogController != undefined) {this.editDialogController.open()}})}.width('100%')}.height('100%')}
}//弹出框
@CustomDialog
struct CustomEditDialog {@Link currentTitle: stringprivate tempTitle: string = ''controller: CustomDialogControllercancel: () => voidconfirm: () => voidbuild() {Column() {TextArea({text: this.currentTitle}).backgroundColor(0xffffff).fontColor(Color.Black).fontSize(20).width('100%').height(200).margin(20).onChange((value: string) => { //显示键盘if (value) {this.tempTitle = value;}})Divider().opacity(0.5).width('100%').color('#D3D3D3')Row() {Text('取消').backgroundColor(0xffffff).fontColor(Color.Black).fontSize(20).margin(10).height('100%').width('45%').textAlign(TextAlign.Center).onClick(() => {this.controller.close()this.cancel()})Divider().vertical(true).color('#D3D3D3')Text('确定').backgroundColor(0xffffff).fontColor(Color.Black).fontSize(20).margin(10).width('45%').height('100%').textAlign(TextAlign.Center).onClick(() => {this.currentTitle = this.tempTitlethis.controller.close()this.confirm()})}.justifyContent(FlexAlign.SpaceEvenly).width('100%').height(60)}}
}//存储数据的类
class BarrageTemplateModel {saveTemplateData(context: Context,key: string, hanHuaArray: string[]) {console.log('存储用户持久化存储的模版：000='+hanHuaArray.toString())dataPreferences.getPreferences(context,"PREFERENCE_KEY",(err,preference) =>{if (err) {console.log('存储用户持久化存储的模版：err1='+err)return}console.log('存储用户持久化存储的模版：success1=')preference.put(key,hanHuaArray,(err) =>{if (err) {console.log('存储用户持久化存储的模版：err2='+err)return}console.log('存储用户持久化存储的模版：success2=')preference.flush((err) => {console.log('存储用户持久化存储的模版：success3=')if (err) {console.log('存储用户持久化存储的模版：err3='+err)return}console.log('存储用户持久化存储的模版：success4=')console.log('存储用户持久化存储的模版：'+hanHuaArray.toString())})})})}
}

查了不少资料，一开始认为是不是因为用户首选项不支持字符串数组，后来看文档是支持的。

然后，认为是不是因为回调的bind(this)，但是不添加bind(this)又会导致回调中的this不是当前组件，访问不到属性。

直到后来注意到我的数组用了@state修饰，去掉后果然不崩溃了。但是我的组件中又需要这个数组用@state修饰。进退两难。。。。

最后只能来个曲线救国，我持久化的数据不直接操作@state的对象，而是持久化copy出来新的一份，就不崩溃了，如下

//弹出框的回调方法onConfirm() {//假设这是对数组进行操作了this.dataArray.splice(0,1)//回调中我将dataArray复制存储在copy中const copy = this.dataArray.map( num => num )//持久化copy数据，不操作dataArray
this.templateDataManager.saveTemplateData(getContext(this),'kUserTemplateKey_HanHua',copy)}

这个操作（复制一份，持久化复制的内容）真的辣眼睛，但是这样确实不崩溃了，值得一提的是：如果你直接const copy = this.dataArray也是不行的，除非复制出来新的一块内存。这个问题估计官方会修复，而且这个操作也太常见了。。。。