以编程方式选中复选框不会在将嵌套数组与对象一起使用时呈现更改

import React, { useState } from 'react';

function CheckboxList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', checked: false },
    { id: 2, name: 'Item 2', checked: false }
  ]);

  const toggleCheckbox = (id) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, checked: !item.checked } : item
      )
    );
  };

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          <input
            type="checkbox"
            checked={item.checked}
            onChange={() => toggleCheckbox(item.id)}
          />
          {item.name}
        </li>
      ))}
    </ul>
  );
}

export default CheckboxList;

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <input
        type="checkbox"
        :checked="item.checked"
        @change="toggleCheckbox(item.id)"
      />
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', checked: false },
        { id: 2, name: 'Item 2', checked: false }
      ]
    };
  },
  methods: {
    toggleCheckbox(id) {
      this.items = this.items.map(item =>
        item.id === id ? { ...item, checked: !item.checked } : item
      );
    }
  }
};
</script>