动态删除React中的元素

Question

我在工作场所肩负着一项在仪表板上工作的任务。

加载页面时，我需要向端点发送请求以获取所有组织的列表并将其显示在选择输入字段中，如下所示

• 我还要选择第一个选项并发送另一个请求以获取仪表板的详细信息，如下所示

主要问题是，

• 一旦第一个选择字段发生变化（如图 1 所示），我将删除其余的下一个下拉列表并替换为提供的数据以创建第二个选择字段并使用新数据填充选项。

注意：如果我已经有 5 个下拉选择字段，并且用户更改了第二个中的选项，我将从 DOM 中删除第 3,4 和第 5 个选择字段并创建一个新的选择字段（现在只创建 3 个）存在）。

如果您不明白，我很乐意通过 google meet 向您解释以便更好地理解

//Dropdown container for the whole SELECT
  let townhalls_select = document.querySelectorAll(
    ".townhall_select_field"
  );
  townhalls_select.forEach(function (div, index) {
    div.addEventListener("change", function () {
      let position = index + 1; // Adding 1 to match human-readable index (starting from 1)

      const townhalls_container = Array.from(townhalls_select);
      if (position == 1) {
        // Remove elements after the third occurrence (index greater than 2)
        townhalls_container.slice(position + 1).forEach((element) => {
          element.remove();
        });
      } else {
        // Remove elements after the third occurrence (index greater than 2)
        townhalls_container.slice(position).forEach((element) => {
          element.remove();
        });
      }
    });
  });

Answer 1

您正在以与使用 React 不兼容的方式处理此问题。你没能理解 React 是如何工作的以及如何用它来做事。

React 为您处理实际的 DOM 操作。您根据传递到组件的 props 和组件的内部状态返回 JSX 元素，这些元素描述了 DOM 应该是什么样子，React 负责根据需要删除、修改或添加 DOM 元素。

如果你试图在 DOM 操作上与 React 进行“斗争”，你将面临各种各样的问题。

我强烈建议您阅读新的 React 文档：https://react.dev/。