创建一个复选框，其中包含连接到 API 的布尔值-解网

问：

我有一个 react 应用程序从作为对象数组的 API 中提取数据。其中一个值是一个布尔值，我正在创建一个复选框，单击该复选框时，它会将布尔值从 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>
)}

我设置了我的并传递了和，但不确定在单击复选框时更改 true / false 值的逻辑。这就是我想要改变状态的想法，但 react 无法识别从 API 数据访问的布尔值。我不认为逻辑是正确的。handleCheckboxChangeecheckediis_active

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

如何使用 react 设置从 API 中提取的布尔值的状态？

JavaScript reactjs 布尔值

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

{data.map((item, i) => (
  <tr key={i}>
    <td>{item.created}</td>
    <td>{item.created_by}</td>
    <td>
      <checkbox
        value={item.is_active}
        checked={checkedItems[i] || false}
        onChange={(e) => handleCheckboxChange(e.target.checked, i)}
      />
    </td>
  </tr>
))}

以下是根据复选框更改更新状态的逻辑：

const handleCheckboxChange = (checked, i) => {
  setCheckedItems((prevCheckedItems) => {
    const newCheckedItems = [...prevCheckedItems];
    newCheckedItems[i] = checked;
    return newCheckedItems;
  });
};

上一个：如何在 Django 中调试，好方法？[关闭]

下一个：1<2<3 是真的，但与这 3>2>1 相反是错误的，为什么？[复制]

创建一个复选框，其中包含连接到 API 的布尔值

Creating a check box with boolean value connected to API

评论