React手风琴内checkbox点击不实时切换仅刷新后生效问题求解

问题根源 #

你遇到的问题核心是过滤后数组的局部索引和原始items数组的全局索引不匹配：
你在渲染非User Defined分类的checkbox时，会先对this.state.items按category过滤得到子数组，再对这个子数组执行map渲染，此时map回调拿到的key是子数组的局部索引，不是对应元素在原始items数组里的全局索引。
你把这个局部索引传入handleCheckClick后直接用它修改原始items数组对应位置的元素，实际修改的根本不是你点击的checkbox对应的数据，自然不会触发预期的视图更新。而User Defined分类下的元素刚好在原始数组的靠前位置，局部索引和全局索引重合，所以功能正常。

修复方案 #

第一步：修改渲染逻辑，传元素唯一ID而非局部索引

将每个分类下checkbox的onChange事件传参从局部索引key替换为当前数据的唯一idpersonData.id：

// 以Head分类为例，Pelvis等其他分类同步修改即可
onChange={(e) => this.handleCheckClick(e, "items", personData.id)}

第二步：修改事件处理逻辑，按ID匹配要修改的元素

调整handleCheckClick的逻辑，通过传入的ID找到原始数组中对应的元素再修改：

handleCheckClick = (e, stateVal, targetId) => {
  // 浅拷贝原始数组触发state更新
  const prevState = [...this.state[stateVal]];
  // 匹配ID找到对应元素
  const targetItem = prevState.find(item => item.id === targetId);
  if (targetItem) {
    targetItem.positive = e.target.checked;
  }
  this.setState({ [stateVal]: prevState });

  // 后续提交逻辑保持不变即可
  const date = moment(this.state.dateState).format("YYYY-MM-DD");
  const { id } = e.target.dataset;
  const checkbox = e.target.checked ? "True" : "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");
    });
};

如果需要严格遵循state不可变更新规范，可以将数组拷贝逻辑替换为全量map生成新数组：

const prevState = this.state[stateVal].map(item => 
  item.id === targetId ? {...item, positive: e.target.checked} : item
);

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