Carbon TreeView内嵌TextInput输入时分支折叠问题求助

可能的原因及解决办法 #

1. 节点key不稳定触发重渲染 #

TreeView靠节点的key跟踪展开状态，如果你的节点key用了数组索引、临时生成的动态值这类每次渲染都会变化的内容，TextInput更新触发组件重渲染时，React会判定节点为全新元素，直接重置展开状态，对应子元素的ul自然会消失。

解决：给每个节点分配唯一且稳定的key，比如节点数据自带的业务ID字段，绝对不要用数组索引当key。

2. 受控展开状态被意外重置 #

如果用受控模式管理TreeView的expandedIds，要注意更新TextInput的state时，不能不小心覆盖了expandedIds的值。比如把展开状态和输入值放在同一个state对象里，更新时没保留原有展开ID，就会直接导致分支折叠。

解决：把展开状态和输入值分开维护，更新输入值时只修改对应state字段：

const [expandedIds, setExpandedIds] = useState(['problem-branch-id']);
const [inputValue, setInputValue] = useState('');

const handleInputChange = (e) => {
  // 只更新输入值，不触碰展开状态
  setInputValue(e.target.value);
};

// TreeView组件正确绑定状态与回调
<TreeView
  expandedIds={expandedIds}
  onExpand={({ expandedId, expanded }) => {
    setExpandedIds(prev => 
      expanded ? [...prev, expandedId] : prev.filter(id => id !== expandedId)
    );
  }}
  nodes={yourTreeNodes}
/>

3. 节点数据每次渲染都重新生成 #

如果TreeView的节点数据是在组件render函数内部动态生成的（比如每次渲染都重新创建节点数组），组件重渲染时TreeView会认为节点全部更新，直接重置展开状态。

解决：用useMemo缓存节点数据，仅当依赖项变化时才重新生成：

const treeNodes = useMemo(() => {
  // 这里写节点生成逻辑，比如根据输入值过滤节点
  return generateTreeNodes(inputValue);
}, [inputValue]); // 仅输入值变化时重新生成节点

<TreeView nodes={treeNodes} />

4. 误混用受控/非受控模式 #

如果没打算手动管理展开状态，却给TreeView传了expandedIds，会强制进入受控模式；若后续没正确维护这个状态，就会导致展开状态丢失。

解决：如果想用非受控模式，直接去掉expandedIds和onExpand的手动绑定，让TreeView自行管理展开状态。

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