React中如何根据Axios获取的API数据设置复选框默认选中状态

我有一个API返回的数据已存入名为allDiseases的状态中，数据格式如下：

[
  {
    disease_id: 1,
    unique_name: "1Mealybugs",
    title: "title1",
    show_status: "publish",
  },
  {
    disease_id: 2,
    unique_name: "Mealybugs",
    title: "title2",
    show_status: "draft",
  },
];

我用以下代码渲染列表项，希望实现：当show_status为draft时复选框未选中，为publish时复选框选中，该如何修改？

现有渲染代码：

<tbody>
  {allDiseases.map((item) => {
    return (
      <tr>
        <td>
            {item.title}
        </td>
        <td>{item.unique_name}</td>

        <td>
          <input
            className="checkHeight"
            defaultChecked={false}
            type="checkbox"
            value={item.show_status}
            id="defaultCheck1"
            onChange={()=> activePost(item.disease_id)}
          />
        </td>
      </tr>
    );
  })}
</tbody>

onChange事件中的activePost接口会修改show_status的值，代码如下：

const activePost = async (idPost) => {
  try {
    const api = "localhost/website/disease/change-show-status";
    const { data } = await axios.post(api,{
      disease_id: idPost
    }, {
      headers: { Authorization: `Bearer ${token}` },
    });
    console.log(data);
    toast.success(data.message, { autoClose: 15000 });
  } catch (e) {
    console.log(e);
    toast.error(e.response.data.error, { autoClose: 15000 });
  }
};

1. 动态设置复选框选中状态 #

将固定的defaultChecked={false}替换为动态的checked属性，根据item.show_status的值判断是否选中：

<input
  className="checkHeight"
  checked={item.show_status === "publish"} // publish状态时选中，draft时未选中
  type="checkbox"
  value={item.show_status}
  id={`defaultCheck-${item.disease_id}`} // 修改id为唯一值，避免DOM冲突
  onChange={()=> activePost(item.disease_id)}
/>

注意：原代码中所有复选框的id都是defaultCheck1，会导致DOM元素id重复，必须改为包含disease_id的唯一值。

2. 接口调用后同步本地状态 #

当前activePost接口调用成功后，未更新本地allDiseases状态，会导致页面显示与后端数据不一致。需在接口返回成功后更新状态（假设使用React的useState管理状态）：

const activePost = async (idPost) => {
  try {
    const api = "localhost/website/disease/change-show-status";
    const { data } = await axios.post(api,{
      disease_id: idPost
    }, {
      headers: { Authorization: `Bearer ${token}` },
    });
    console.log(data);
    toast.success(data.message, { autoClose: 15000 });
    
    // 更新本地状态，同步后端修改后的show_status
    setAllDiseases(prevDiseases => prevDiseases.map(item => {
      if (item.disease_id === idPost) {
        // 若接口返回更新后的状态，直接使用data中的值
        return { ...item, show_status: data.show_status };
        // 若接口是切换状态（publish↔draft），也可直接切换：
        // return { ...item, show_status: item.show_status === "publish" ? "draft" : "publish" };
      }
      return item;
    }));
  } catch (e) {
    console.log(e);
    toast.error(e.response.data.error, { autoClose: 15000 });
  }
};

这样接口调用成功后，本地状态会同步更新，页面复选框状态也会自动刷新。

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