Question

我有一个带有问题组件的表格，这个问题组件使我可以添加问题的各个部分，如下图所示：

您还可以看到我有一个删除每个部分的按钮，这是我的部分组件上的按钮：

<button
    className="circle-button delete-section"
    onClick={handleDeleteSection}
    data-section-id={sectionId}
    type="button"
  >
    &times;
  </button>

此按钮有一个handleDeleteSection，此方法位于父组件上，这是方法：

const handleDeleteSection = (event) => {
    const idToDelete = event.target.dataset.sectionId;
    const updatedSections = questionaryState.sections.filter(
      (section) => section.sectionId !== idToDelete
    );
    // update the state with new sections
    setQuestionaryState((questionaryState) => ({
      ...questionaryState,
      sections: updatedSections,
    }));
  };

，但是updatedSections的长度总是错误的，例如：如果我单击“第1部分”的删除按钮，则updateSections的长度为0 如果我单击“第3节”的删除按钮，则updateSections的长度为2 如果我点击“第4部分”的删除按钮，则updateSections的长度为3

但是如您在下图中所看到的，questionaryState.sections具有4个元素：

关于此处发生的任何想法或建议，因为没有适当的部分排列，当用户按下删除按钮时，我无法删除该部分

预先感谢您的帮助

编辑：上传视频

以下是带有示例的视频：https://vimeo.com/469746051

Answer 1

您正在以错误的方式使用setQuestionaryState（状态）挂钩，应在通过传递对象而不是使用回调函数的方式删除被单击的元素后更新状态，如下所示：

const handleDeleteSection = (event) => {
    const idToDelete = event.target.dataset.sectionId;
    const updatedSections = questionaryState.sections.filter(
      (section) => section.sectionId !== idToDelete
    );

    // update the state with new sections
    setQuestionaryState({
      ...questionaryState,
      sections: updatedSections,
    });
};

Answer 2

您需要在过滤之前扩展状态，以防止在创建新数组时更安全地传递ref，然后将过滤后的结果直接以设置状态传递给您的“ sections”

const handleDeleteSection = (event) => {
    const idToDelete = event.target.dataset.sectionId;
    const sectonsTemp =  [...questionaryState.sections]
    const updatedSections =sectonsTemp.filter(
      (section) => section.sectionId !== idToDelete
    );
    // update the state with new sections
   setQuestionaryState({
      ...questionaryState,
      sections: updatedSections ,
    });

  };

Answer 3

这对我有用。

const handleDeleteSection = (idToDelete) => {
  const updatedSections = questionaryState.sections.filter(
    (section) => section.sectionId !== idToDelete
  );

  setQuestionaryState({
    sections: updatedSections
  });
};

HTML

<button
  className="circle-button delete-section"
  onClick={() => handleDeleteSection(sectionId)}
  type="button"
>
  &times;
</button>

状态上的奇怪行为

3 个答案: