復選框onclick僅在重繪reactjs后才更改

我有一個帶有復選框的手風琴，但是當我單擊復選框時，復選框沒有切換，但資料已提交，重繪 后復選框被切換

https://codesandbox.io/s/vibrant-moon-9722j?file=/src/App.js:7492-11534 我在這里創建了一個代碼沙盒里面的復選框User Defined正在作業我想要休息

問題是因為我正在根據類別過濾陣列

<div className="accordion-item">
                    <div
                      style={styles.tilte}
                      className="accordion-title "
                      onClick={() => this.navClose("Head")}
                    >
                      {/* // onClick={setActiveCurrentIndex(item[0].date)}> */}
                      <div>Head</div>
                      <i class="fa fa-plus" aria-hidden="true"></i>
                    </div>
                    {this.state.navStatus ? (
                      <div className="accordion-content  tableforsymtm">
                        {this.state.items
                          .filter((person) => person.category == "Head")
                          .map((personData, key) => {
                            return (
                              <span className="trforsymtm">
                                <td key={personData.id}>
                                  <input
                                    // className="invinsiveinput"
                                    data-id={personData.id}
                                    type="checkbox"
                                    id={personData.id}
                                    checked={personData && personData.positive}
                                    onChange={(e) =>
                                      this.handleCheckClick(e, "items", key)
                                    }
                                    // defaultChecked={personData && personData.positive}
                                    // onChange={this.handleCheckClick}
                                  />
                                  {/* <label for={personData.id}>{personData.name}</label> */}
                                </td>
                                <td>{personData.name}</td>
                              </span>
                            );
                          })}
                      </div>
                    ) : null}
                  </div>
                  {/* ))} */}
                  <div className="accordion-item">
                    <div
                      style={styles.tilte}
                      className="accordion-title "
                      onClick={() => this.navClose("Pelvis")}
                      // onClick={setActiveCurrentIndex(item[0].date)}
                    >
                      <div>Pelvis</div>
                      <i class="fa fa-plus" aria-hidden="true"></i>
                    </div>
                    {this.state.Pelvis ? (
                      <div className="accordion-content  tableforsymtm">
                        {this.state.items
                          .filter((person) => person.category == "Pelvis")
                          .map((personData, key) => {
                            return (
                              <span className="trforsymtm">
                                <td key={personData.id}>
                                  <input
                                    // className="invinsiveinput"
                                    data-id={personData.id}
                                    type="checkbox"
                                    id={personData.id}
                                    checked={personData && personData.positive}
                                    onChange={(e) =>
                                      this.handleCheckClick(e, "items", key)
                                    }
                                    // defaultChecked={personData && personData.positive}
                                    // onChange={this.handleCheckClick}
                                  />
                                  {/* <label for={personData.id}>{personData.name}</label> */}
                                </td>
                                <td>{personData.name}</td>
                              </span>
                            );
                          })}
                      </div>
                    ) : null}
                  </div>
           

我認為錯誤是傳遞狀態值

handleCheckClick = (e, stateVal, index) => {
     let prevState = [...this.state[stateVal]];
  prevState[index].positive = e.target.checked;  // i think the error is here
  console.log(index);
  this.setState({ [stateVal]: prevState });
  var date = moment(this.state.dateState).format("YYYY-MM-DD");
  const { id, checked } = e.target.dataset;
  console.log(stateVal);
  if (e.target.checked) {
    var checkbox = "True";
  } else {
    var checkbox = "False";
  }

  const Data = {
    positive: checkbox,
    date: date,
    symptom: id
  };
  const headers = {
    Authorization: `token`
  };
  axios
    .post("customer/symptoms-submit/", Data, {
      headers: headers
    })
    .then(() => {
      alert("symptom was submitted");
    })
    .catch((error) => {
      alert("Cannot add symptoms again");
    });

  
};

uj5u.com熱心網友回復：

您的代碼非常雜亂無章，但本質上您只需要在資料更新后觸發重新獲取資料。getData當組件掛載時，該函式已經這樣做了。在handleCheckClick處理程式中成功 POST 請求后呼叫此函式。

handleCheckClick = (e, stateVal, index) => {
  ...

  const headers = {
    Authorization: `token xxxxxx`
  };

  axios
    .post(
      "customer/symptoms-submit/",
      data,
      { headers }
    )
    .then(() => {
      alert("symptom was submitted");
      this.getData(); // <-- trigger refetch data here
    })
    .catch((error) => {
      alert("Cannot add symptoms again");
    });
};

標籤：javascript 反应

上一篇：執行npmrunbuild命令后，Reactappdocker容器退出/重新啟動

下一篇：反應路由器Dom