Как я могу изменить состояние флажка здесь?

Question

Мне удалось изменить activation status из companies в базе данных на событие onClick флажка.Теперь я не могу переключить статус флажка, что мне здесь не хватает?

Я просматривал различные сайты, но не смог найти решение.

Вот мой код, в котором я печатаю компании.

{this.state.allCompanies.map(com => (
                <tr>
                  <td>{com.cname} </td>
                  <td>
                    <a>
                        <input
                          type="checkbox"
                          name="active"
                          checked={com.is_active == 1 ? "true" : ""}
                          onClick={
                            (() => {
                              this.setState({ cked: !this.state.cked });
                            },
                            e => this.handleActivated(e, com.cid))
                          }
                        />
                    </a>
                  </td>
                </tr>
              ))}

Вот мойфункция.

 handleActivated(e, id) {
    const comid = id;
    var data = {
      comid: id
    };
    console.log(data);
    fetch("http://localhost:5000/edit/company", {
      method: "POST",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    })
      .then(function(response) {
        if (response.status >= 400) {
          throw new Error("Bad Response from server");
        }
        return response.json();
      })
      .then(function(data) {
        console.log(data);
        if (data === "success") {
          // e.target.checked : !e.target.checked;
          this.setState({ msg: "Company Edited", active: !e.target.checked });
        }
      })
      .catch(function(err) {
        console.log(err);
      });

    // this.setState({  });
  }

Answer 1

Вы передаете две функции в onClick, и, насколько мне известно (хотя я не могу предоставить источник для этого или сказать вам, почему), реакция будет использовать только последнее значение, которое вы дадите реквизитам.Вот почему установка состояния cked, вероятно, не сработала.

Я бы предложил назначить ему только 1 функцию, например, так:

onClick={
    (e) => {
        this.setState({ cked: !this.state.cked });
        this.handleActivated(e, com.cid)
    }
}

Если вы хотите выполнить только вторую функциюпосле выполнения setState (поскольку он асинхронный), вы должны использовать функцию обратного вызова setState.

onClick={
    (e) => {
        this.setState({ cked: !this.state.cked }, () => {
            this.handleActivated(e, com.cid)
        });
    }
}