React+TypeScript中如何点击Checkbox更新对应数据的status状态？

1. 将静态数据转为React状态 #

filterProps是常量，直接修改无法触发组件重渲染，且你遇到的TypeScript错误是因为它是数组类型，不存在status属性。需要用useState将其转为可管理的组件状态：

import { useState } from 'react';

// 保留原有接口定义
interface IFilterContent { id: number; title: string; status?: boolean }
export interface IFilterDropdownOptions { id: number; title: string; content: IFilterContent[]; isDate: boolean }

// 定义初始数据
const initialFilterProps: IFilterDropdownOptions[] = [{ 
  id: 4, 
  title: 'Status', 
  content: [
    { id: 1, title: 'Draft', status: false }, 
    { id: 2, title: 'In Review', status: false }, 
    { id: 3, title: 'Need Revision', status: false }, 
    { id: 4, title: 'Sent', status: false }
  ], 
  isDate: false 
}]

// 在组件内初始化状态
const YourComponent = () => {
  const [filterProps, setFilterProps] = useState<IFilterDropdownOptions[]>(initialFilterProps);
  
  // 后续编写状态更新逻辑
  // ...
}

2. 编写正确的状态更新函数 #

需要定位到目标IFilterContent项，通过不可变更新的方式修改status，同时保留原有的日志逻辑：

const handleStatusChange = (contentId: number, checked: boolean) => {
  // 不可变更新状态，返回新的数组/对象触发重渲染
  setFilterProps(prevProps => prevProps.map(opt => {
    // 定位到目标选项组（这里用id或title均可，id更精准）
    if (opt.id === 4) {
      return {
        ...opt,
        content: opt.content.map(item => {
          // 找到对应的content项，更新status
          if (item.id === contentId) {
            return { ...item, status: checked };
          }
          return item;
        })
      };
    }
    return opt;
  }));

  // 保留原日志输出
  console.log(`Status ${contentId} ${checked ? 'checked' : 'unchecked'}`);
};

3. 调整渲染逻辑，传递正确参数 #

更新复选框的onChange事件，直接传递content项的id和选中状态，同时确保checked绑定状态中的值：

<div className='content-checkbox'>
  {filterProps.map(opt => (
    <div key={opt.id}>
      <h3>{opt.title}</h3>
      {opt.content.map((c) => (
        <label className='label-container' key={c.id}>
          <input 
            type='checkbox' 
            onChange={(e) => handleStatusChange(c.id, e.target.checked)} 
            id={`status-${c.id}`} // 用唯一id避免冲突
            checked={c.status ?? false} // 处理status可能为undefined的情况
          />
          <span>{c.title}</span>
        </label>
      ))}
    </div>
  ))}
</div>

关键说明 #

• 不可变更新：React状态必须通过返回新对象/数组的方式更新，直接修改原状态不会触发组件重渲染。
• 类型修正：之前的错误是直接给数组类型的filterProps赋值status，正确做法是先定位数组中的目标对象，再修改其内部的content数组项。
• 参数可靠性：直接传递content项的数字id，比依赖input的title字符串id更可靠，避免因title重复或格式问题导致匹配错误。

内容的提问来源于stack exchange，提问作者B A N G A T A