Observed,ObjectLink 父组件数据改变，子组件数据没有变化

Question

鸿蒙应用开发，Observed，ObjectLink Index04中todo数据改变，子组件todoItem中数据没有变化

@Observed
class Todo{
  public value:{id:string,content:string,finished:boolean}[]=[];
  constructor() { }
}

@Entry
@Component
struct Index04 {
  @State todo: Todo = new Todo();
  @State thing:string='';

  setThing(value:string){
    this.thing=value;
  }

  addThing(){
    if(this.thing.trim().length){
      this.todo.value.push({
        id:String(new Date()),
        content:this.thing.trim(),
        finished:false
      });
      this.thing='';
      console.log(JSON.stringify(this.todo));
    }
  }

  build() {
    Flex() {
      Flex({direction:FlexDirection.Column}){
        Row(){
          TextInput({ text:this.thing,placeholder:'input to do.' })
            .onChange(this.setThing.bind(this))
            .width(200)
          Button('add')
            .onClick(this.addThing.bind(this))
            .margin({left:20})
        }

        TodoItem({ todo:this.todo })

        Flex({justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Row(){
            CheckboxGroup({group:'choose'})
            Text('全选/取消')
          }
          Text(this.todo.value.filter(item=>item.finished).length+'完成')
          Text(this.todo.value.filter(item=>!item.finished).length+'未完成')
        }.margin({top:20})
      }.padding({top:50,bottom:50,left:20,right:20}).height(400)
    }
    .height('100%')
  }
}

@Component
struct TodoItem{
  @ObjectLink todo:Todo;

  deleteThing(id:string){
    console.log('id=',id);
    let index=this.todo.value.findIndex(item=>item.id===id);
    if(index!=-1){
      this.todo.value.splice(index,1);
    }
  }

  changeState(id:string){
    let index=this.todo.value.findIndex(item=>item.id===id);
    if(index!==-1){
      this.todo[index].finished = !this.todo[index].finished;
    }
  }

  build(){
    List() {
      if(this.todo.value.length){
        ForEach(this.todo.value,(item)=>{
          ListItem(){
            Flex({justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
              Checkbox({group:'choose'})
                .select(item.finished)
                .onChange(this.changeState.bind(this,item.id))
              Text(item.content)
              Button("删除")
                .backgroundColor(Color.Red)
                .margin({top:10})
                .onClick(this.deleteThing.bind(this,item.id))
            }
          }
        })
      }else{
        ListItem(){
          Text("add something to do").width("100%").textAlign(TextAlign.Center)
        }
        .height(40)
        .border({width:1,color:Color.Grey,})
      }
    }.margin({top:20})
  }
}

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

【您想要解决的问题】： 您提问的目的是解决在鸿蒙应用开发中，当父组件 Index04 中的 Todo 类型数据发生变化时，子组件 TodoItem 中绑定的 Todo 类型数据没有相应更新的问题。

【问题出现原因】：

1. TodoItem 组件使用了 @ObjectLink 来链接 Todo 类型数据，但没有正确地实现数据的响应式更新。
2. TodoItem 组件中对 Todo 类型数据的修改没有触发重新渲染，可能是因为数据的引用没有发生变化，导致子组件没有接收到更新信号。

【问题解决方案】：

1. 确保 Todo 类型数据的修改能够触发子组件的重新渲染。这通常需要确保数据的引用在修改时发生变化，或者使用框架提供的响应式系统来自动处理。
2. 检查 @ObjectLink 是否正确设置，并且确保子组件能够接收到父组件数据的变化。

【提供代码】： 由于代码中没有明确的错误，我无法提供具体的修改代码。但是，我可以提供一些可能的解决方案方向：

• 确保 Todo 类型数据的修改能够触发子组件的更新。这可能需要使用框架提供的响应式系统，或者手动管理数据的引用。
• 如果 @ObjectLink 不起作用，可以考虑使用其他方式来传递数据，例如通过事件或者状态管理库。

【代码运行方式】：

• 需要在鸿蒙应用开发环境中运行，这通常意味着需要有鸿蒙操作系统的开发环境和相应的开发工具。
• 将代码放入相应的项目结构中，并通过鸿蒙应用开发工具进行编译和运行。

【代码预期运行结果】：

• 当在 Index04 组件中添加新的待办事项时，TodoItem 子组件应该能够显示更新后的待办事项列表。
• 当在 TodoItem 组件中删除或修改待办事项的状态时，这些更改应该反映在 Index04 组件中显示的待办事项列表中。

【推荐相关链接】：

1. 鸿蒙应用开发文档
2. 鸿蒙应用开发响应式编程指南
3. 鸿蒙应用开发组件通信
4. 鸿蒙应用开发状态管理

请注意，以上链接仅为示例，具体链接需要根据鸿蒙应用开发的最新文档和资源进行查找。