如何从 JSON REST API 响应设置默认复选框值（来自 Axios/React）

Question

我有一个 api，它的 output 在下面，我将它保存在一个名为allDiseases的 state 中

 [
   {
     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)中有一个api，执行时会改变showStatus的值

  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 });
    }
  };

Answer 1

如果您在defaultChecked中使用三元语句，它应该可以工作。

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

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