如何为mui-tree-select组件设置默认选中值？求助

核心解决方案 #

• 匹配值格式：默认选中值必须与树节点的value属性类型、内容完全一致，不能使用节点对象或其他不匹配格式。
• 受控模式初始化：使用受控模式时，在状态初始化阶段传入目标默认值：

import { useState } from "react";
import TreeSelect from "mui-tree-select";

const treeData = [
  {
    value: "root",
    label: "Root",
    children: [
      { value: "child-1", label: "Child 1" },
      { value: "child-2", label: "Child 2" }
    ]
  }
];

export default function App() {
  // 初始化状态为目标默认选中节点的value
  const [selected, setSelected] = useState("child-1");

  return (
    <TreeSelect
      tree={treeData}
      value={selected}
      onChange={setSelected}
      placeholder="Select a node"
    />
  );
}

• 非受控模式直接设置：无需状态管理时，直接使用defaultValue属性：

<TreeSelect
  tree={treeData}
  defaultValue="child-1"
  onChange={(val) => console.log(val)}
  placeholder="Select a node"
/>

• 多选场景适配：开启multiple属性后，默认值需为数组格式：

<TreeSelect
  tree={treeData}
  multiple
  defaultValue={["child-1", "child-2"]}
  onChange={(vals) => console.log(vals)}
/>

排查注意事项 #

• 确认默认值对应的节点确实存在于树结构中，不存在的value不会被组件识别
• 检查是否有异步逻辑（如接口请求）在组件挂载后修改了状态，覆盖了初始默认值
• 确保没有自定义样式或第三方逻辑干扰组件的选中状态渲染

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