useEffect内DOM操作与外部状态联动组件更新问题

1. 如何在useEffect中访问并修改DOM元素？ #

• 用useRef创建DOM引用，绑定到目标元素上，在useEffect中通过ref.current访问DOM节点。
• 确保DOM已挂载后再操作：可以把ref加入useEffect的依赖数组，或者在useEffect内部判断ref.current是否存在。
• 修改DOM直接通过ref.current操作属性，比如ref.current.disabled = true。

2. 当useEffect外部元素更新时，如何更新hook内的代码？ #

• 把外部依赖（状态、props）加入useEffect的依赖数组，依赖变化时useEffect会重新执行，内部代码同步更新。
• 尽量不在useEffect里生成静态JSX或数据结构，把渲染逻辑移到组件主渲染流程中，利用React自动重渲染机制同步状态变化。

针对你的场景的具体解决方案 #

你的核心问题是：选中表格行时multiDeleteHost状态已变化，但useEffect生成的Delete Host下拉选项disabled属性未同步更新。原因是multiDeleteHost不在useEffect依赖数组中，状态变化时useEffect不会重新执行，生成的行数据还是旧值。

方案1：添加状态到useEffect依赖数组 #

把multiDeleteHost加入useEffect的依赖数组，状态变化时重新生成行数据，同步下拉选项的禁用状态：

const handleSelectHost = (selectedHosts) => {
  setMultiDeleteHost(selectedHosts.length >= 1); // 简化状态赋值
  const updatedMultiHostName = updateObject(multiHostName, {
    selectValue: selectedHosts,
  });
  setMultiHostName(updatedMultiHostName);
};

useEffect(() => {
  let isUnmount = false;
  let selectedHosts = [];
  if (props.hosts) {
    const rows = props.hosts.map((row, key) => {
      const initiatorNames = []
      const initiatorConnected = []
      const initiatorDisconnected = []
      for (let initiator of row.initiators) {
        initiatorNames.push(initiator.name)
      }
      row.initiators.forEach((initiator) => {
        if (initiator["Connection Status"] === "Connected") {
          initiatorConnected.push(initiator)
        } else {
          initiatorDisconnected.push(initiator)
        }
      });

      return {
        name: row.name,
        ip: <div style={{ width: 100 }}>{row.ip}</div>,
        initiators: <div>{[...new Set(initiatorNames)].map((item, index) => { return <span key={index} className="target px-2">{item}</span> })}</div>,
        connection_Status: `${initiatorConnected.length} Connected, ${initiatorDisconnected.length} Disconnected`,
        access_control: row.acc,
        type: row.type,
        actions: [
          <div key={row.name} className="d-flex align-items-center">
            <MDBBtn
              onClick={(e) => handleShowDetail(row)}
              size="sm"
              outline
              color=""
              className="primary-color"
            >
              Detail
            </MDBBtn>
            <MDBDropdown key={key} dropright className="text-center">
              <MDBDropdownToggle
                color=""
                className="z-depth-0 hoverable py-1 px-2 my-0"
              >
                <MDBIcon icon="fas fa-ellipsis-v dynamic-text-color" />
              </MDBDropdownToggle>
              <MDBDropdownMenu color="" basic>
                <MDBDropdownItem onClick={() => handleHostEdit(row)}>
                  Edit Host
                </MDBDropdownItem>
                <MDBDropdownItem
                  disabled={multiDeleteHost} // 直接使用布尔状态
                  onClick={() => handleDeleteHost(row.name)}
                >
                  Delete Host
                </MDBDropdownItem>
                <MDBDropdownItem
                  hidden={!row.ip} // 简化判断逻辑
                  onClick={() => handleDeleteIp(row.ip, row.name)}
                >
                  Delete Ip
                </MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </div>,
        ],
      };
    });
    const updateDataTable = updateObject(dataTable, {
      rows: rows,
      options: updateObject(dataTable.options, {
        onRowSelectionChange: (
          currentRowsSelected,
          allRowsSelected,
          rowsSelected
        ) => {
          selectedHosts = rowsSelected.map(index => props.hosts[index]?.name).filter(Boolean);
          handleSelectHost(selectedHosts);
          fetchRef()
        },
        textLabels: {
          body: {
            noMatch: !rows.length ? "Sorry, no matching records found" : "",
          },
        },
      }),
    });
    if (!isUnmount) {
      setDataTable(updateDataTable);
    }
  }
  return () => {
    isUnmount = true;
    setMultiDeleteHost(false);
    setMultiHostName({ selectValue: [] });
  };
}, [props.hosts, multiDeleteHost]); // 添加multiDeleteHost到依赖数组

方案2：优化渲染逻辑（更推荐） #

避免在useEffect中生成JSX，把行数据生成逻辑移到组件主渲染流程，让表格直接依赖multiDeleteHost状态，利用React自动重渲染同步更新：

// 组件主渲染部分生成行数据
const rows = props.hosts?.map((row, key) => {
  const initiatorNames = []
  const initiatorConnected = []
  const initiatorDisconnected = []
  for (let initiator of row.initiators) {
    initiatorNames.push(initiator.name)
  }
  row.initiators.forEach((initiator) => {
    if (initiator["Connection Status"] === "Connected") {
      initiatorConnected.push(initiator)
    } else {
      initiatorDisconnected.push(initiator)
    }
  });

  return {
    name: row.name,
    ip: <div style={{ width: 100 }}>{row.ip}</div>,
    initiators: <div>{[...new Set(initiatorNames)].map((item, index) => { return <span key={index} className="target px-2">{item}</span> })}</div>,
    connection_Status: `${initiatorConnected.length} Connected, ${initiatorDisconnected.length} Disconnected`,
    access_control: row.acc,
    type: row.type,
    actions: [
      <div key={row.name} className="d-flex align-items-center">
        <MDBBtn
          onClick={(e) => handleShowDetail(row)}
          size="sm"
          outline
          color=""
          className="primary-color"
        >
          Detail
        </MDBBtn>
        <MDBDropdown key={key} dropright className="text-center">
          <MDBDropdownToggle
            color=""
            className="z-depth-0 hoverable py-1 px-2 my-0"
          >
            <MDBIcon icon="fas fa-ellipsis-v dynamic-text-color" />
          </MDBDropdownToggle>
          <MDBDropdownMenu color="" basic>
            <MDBDropdownItem onClick={() => handleHostEdit(row)}>
              Edit Host
            </MDBDropdownItem>
            <MDBDropdownItem
              disabled={multiDeleteHost}
              onClick={() => handleDeleteHost(row.name)}
            >
              Delete Host
            </MDBDropdownItem>
            <MDBDropdownItem
              hidden={!row.ip}
              onClick={() => handleDeleteIp(row.ip, row.name)}
            >
              Delete Ip
            </MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </div>,
    ],
  };
}) || [];

// useEffect仅处理表格配置
useEffect(() => {
  if (props.hosts) {
    const updateDataTable = updateObject(dataTable, {
      options: updateObject(dataTable.options, {
        onRowSelectionChange: (
          currentRowsSelected,
          allRowsSelected,
          rowsSelected
        ) => {
          const selectedHosts = rowsSelected.map(index => props.hosts[index]?.name).filter(Boolean);
          handleSelectHost(selectedHosts);
          fetchRef()
        },
        textLabels: {
          body: {
            noMatch: !rows.length ? "Sorry, no matching records found" : "",
          },
        },
      }),
    });
    setDataTable(updateDataTable);
  }
}, [props.hosts]);

// 渲染表格时传入最新的rows
return <MDBDataTable data={{...dataTable, rows}} />;

这样multiDeleteHost状态变化时，组件会自动重新渲染行数据，下拉选项的禁用状态同步更新，更符合React数据流模式。

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