React中如何绑定API返回的布尔值实现复选框状态切换？

我有一个从API拉取对象数组数据的React应用，其中包含布尔类型字段is_active，希望创建复选框，点击时切换该字段的true/false状态。

API返回的数据示例：

[
  { created: "Nov 10", created_by: "Tim", is_active: true },
  { created: "Nov 15", created_by: "Bill", is_active: false }
]

我创建了表格遍历数据，代码如下：

const [checkedItems, setCheckedItems] = useState([])
const [data, setData] = useState([]);

{data.map((group, i) => (
<tr key={i}>
 <td> {data.created}</td>
 <td> {data.created_by}</td>
<td> <checkbox value={data.is_active}
      checked={checkedItem}
      onChange={(e) => handleCheckboxChange(e.target.checked, i)}
/></td>
<tr>
))}

我编写了handleCheckboxChange函数，但切换is_active值的逻辑有问题，状态更新代码无法正确识别API返回的布尔值：

const handleCheckboxChange = (e, checked, i) => {
let newChecked = checkedItems.map((x) => x);
      newChecked ? setCheckedItems(false) : setCheckedItems(true);
      setCheckedItems(newChecked)
     }

请问如何在React中正确设置从API获取的布尔值的状态？

你的代码存在几个核心问题：遍历数据时的引用错误、复选框状态绑定错误、状态更新逻辑混乱，下面是修正后的完整实现方案：

方案一：直接维护原数据的is_active字段（推荐） #

这种方式不需要额外的状态数组，直接操作API返回的data数组，逻辑更直观：

1. 修正后的完整代码 #

import { useState, useEffect } from 'react';

export default function YourComponent() {
  const [data, setData] = useState([]);

  // 模拟API拉取数据（替换为你的实际请求逻辑）
  useEffect(() => {
    const fetchData = async () => {
      const apiData = [
        { created: "Nov 10", created_by: "Tim", is_active: true },
        { created: "Nov 15", created_by: "Bill", is_active: false }
      ];
      setData(apiData);
    };
    fetchData();
  }, []);

  // 处理复选框切换逻辑
  const handleCheckboxChange = (index) => {
    // 复制原数组，避免直接修改React状态
    const updatedData = [...data];
    // 对目标项的is_active取反，完成状态切换
    updatedData[index].is_active = !updatedData[index].is_active;
    // 更新状态
    setData(updatedData);
  };

  return (
    <table>
      <tbody>
        {data.map((group, i) => (
          <tr key={i}>
            <td>{group.created}</td>
            <td>{group.created_by}</td>
            <td>
              <input
                type="checkbox"
                // 直接绑定当前项的is_active字段
                checked={group.is_active}
                onChange={() => handleCheckboxChange(i)}
              />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

关键修正点 #

• 遍历数据时使用当前项group而非原数组data，比如group.created而不是data.created
• 复选框使用标准的<input type="checkbox">标签，而非错误的<checkbox>
• checked属性直接绑定到当前项的is_active字段，无需额外状态数组
• 状态更新时严格遵循React不可变原则，先复制数组再修改，避免直接操作原状态

方案二：单独维护复选框状态数组 #

如果你需要将复选框状态与原数据分离，可以单独维护checkedItems数组：

1. 初始化状态并同步API数据 #

const [data, setData] = useState([]);
const [checkedItems, setCheckedItems] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    const apiData = [
      { created: "Nov 10", created_by: "Tim", is_active: true },
      { created: "Nov 15", created_by: "Bill", is_active: false }
    ];
    setData(apiData);
    // 根据API返回的is_active初始化复选框状态数组
    setCheckedItems(apiData.map(item => item.is_active));
  };
  fetchData();
}, []);

2. 修正渲染与状态更新逻辑 #

// 表格中的复选框渲染代码
<input
  type="checkbox"
  checked={checkedItems[i]}
  onChange={(e) => handleCheckboxChange(e.target.checked, i)}
/>

// 状态更新函数
const handleCheckboxChange = (isChecked, index) => {
  // 复制状态数组并修改目标项
  const updatedChecked = [...checkedItems];
  updatedChecked[index] = isChecked;
  setCheckedItems(updatedChecked);

  // 可选：同步更新原数据的is_active字段
  const updatedData = [...data];
  updatedData[index].is_active = isChecked;
  setData(updatedData);
};

内容的提问来源于stack exchange，提问作者jSvSL