当ConfigComponent中表单存在树形结构，渲染报错 about flow-builder HOT 7 CLOSED

点击节点后drawer弹出，当drawer中form中存在treeSelect这种value值是对象形式，save成功后，再次点击该节点，会报错 drawer中表单代码

  const ConfigForm: React.FC = () => {
  const { selectedNode: node, setDrawerTitle } = useContext(BuilderContext);

  const { saveDrawer: save } = useDrawer();

  const [form] = Form.useForm();
  const [treeData, setTreeData] = React.useState<API.System.DeptTreeUser[]>([]);
  useEffect(() => {
    (async () => {
      setDrawerTitle('配置');
      const { data } = await getDeptTreeUser();
      setTreeData(data as API.System.DeptTreeUser[]);
      form.setFieldsValue({
        name: node!.data?.name,
      });
    })();
  }, []);

  async function handleSubmit() {
    try {
      const values = await form.validateFields();
      save?.(values);
    } catch (e) {
      const values = form.getFieldsValue();
      save?.(values, !!e);
    }
  }
  return (
    <div>
      <Form<{ name: API.System.DeptTreeUser }> form={form}>
        <Form.Item name="name" label="处理人" rules={[{ required: true, message: '请选择处理人' }]}>
          <TreeSelect
            allowClear
            treeData={treeData}
            placeholder="请选择处理人"
            showArrow={false}
            filterTreeNode={true}
            showSearch={true}
            popupMatchSelectWidth={false}
            labelInValue={true}
            autoClearSearchValue={true}
            multiple={false}
            treeNodeFilterProp="label"
            fieldNames={{ value: 'id' }}
          />
        </Form.Item>
      </Form>
      <Button.Group>
        <Button type={'primary'} onClick={handleSubmit}>
          确定
        </Button>
      </Button.Group>
    </div>
  );
};

export default ConfigForm;

saveDrawer 只是把数据赋值给了节点的 data，没有做其他的改动

from flow-builder.

点击节点后drawer弹出，当drawer中form中存在treeSelect这种value值是对象形式，save成功后，再次点击该节点，会报错 drawer中表单代码

  const ConfigForm: React.FC = () => {
  const { selectedNode: node, setDrawerTitle } = useContext(BuilderContext);

  const { saveDrawer: save } = useDrawer();

  const [form] = Form.useForm();
  const [treeData, setTreeData] = React.useState<API.System.DeptTreeUser[]>([]);
  useEffect(() => {
    (async () => {
      setDrawerTitle('配置');
      const { data } = await getDeptTreeUser();
      setTreeData(data as API.System.DeptTreeUser[]);
      form.setFieldsValue({
        name: node!.data?.name,
      });
    })();
  }, []);

  async function handleSubmit() {
    try {
      const values = await form.validateFields();
      save?.(values);
    } catch (e) {
      const values = form.getFieldsValue();
      save?.(values, !!e);
    }
  }
  return (
    <div>
      <Form<{ name: API.System.DeptTreeUser }> form={form}>
        <Form.Item name="name" label="处理人" rules={[{ required: true, message: '请选择处理人' }]}>
          <TreeSelect
            allowClear
            treeData={treeData}
            placeholder="请选择处理人"
            showArrow={false}
            filterTreeNode={true}
            showSearch={true}
            popupMatchSelectWidth={false}
            labelInValue={true}
            autoClearSearchValue={true}
            multiple={false}
            treeNodeFilterProp="label"
            fieldNames={{ value: 'id' }}
          />
        </Form.Item>
      </Form>
      <Button.Group>
        <Button type={'primary'} onClick={handleSubmit}>
          确定
        </Button>
      </Button.Group>
    </div>
  );
};

export default ConfigForm;

saveDrawer 只是把数据赋值给了节点的 data，没有做其他的改动

我知道，所以node节点的data属性上能完整获取到保存的数据，但是在drawer回显的时候就报错了，是否是封装表单的时候没考虑到这种情况呢？

from flow-builder.

点击节点后drawer弹出，当drawer中form中存在treeSelect这种value值是对象形式，save成功后，再次点击该节点，会报错 drawer中表单代码

  const ConfigForm: React.FC = () => {
  const { selectedNode: node, setDrawerTitle } = useContext(BuilderContext);

  const { saveDrawer: save } = useDrawer();

  const [form] = Form.useForm();
  const [treeData, setTreeData] = React.useState<API.System.DeptTreeUser[]>([]);
  useEffect(() => {
    (async () => {
      setDrawerTitle('配置');
      const { data } = await getDeptTreeUser();
      setTreeData(data as API.System.DeptTreeUser[]);
      form.setFieldsValue({
        name: node!.data?.name,
      });
    })();
  }, []);

  async function handleSubmit() {
    try {
      const values = await form.validateFields();
      save?.(values);
    } catch (e) {
      const values = form.getFieldsValue();
      save?.(values, !!e);
    }
  }
  return (
    <div>
      <Form<{ name: API.System.DeptTreeUser }> form={form}>
        <Form.Item name="name" label="处理人" rules={[{ required: true, message: '请选择处理人' }]}>
          <TreeSelect
            allowClear
            treeData={treeData}
            placeholder="请选择处理人"
            showArrow={false}
            filterTreeNode={true}
            showSearch={true}
            popupMatchSelectWidth={false}
            labelInValue={true}
            autoClearSearchValue={true}
            multiple={false}
            treeNodeFilterProp="label"
            fieldNames={{ value: 'id' }}
          />
        </Form.Item>
      </Form>
      <Button.Group>
        <Button type={'primary'} onClick={handleSubmit}>
          确定
        </Button>
      </Button.Group>
    </div>
  );
};

export default ConfigForm;

saveDrawer 只是把数据赋值给了节点的 data，没有做其他的改动

我知道，所以node节点的data属性上能完整获取到保存的数据，但是在drawer回显的时候就报错了，是否是封装表单的时候没考虑到这种情况呢？

这个像是你的 TreeSelect 接收到的数据不太对吧，我没有封装表单，表单全是你自定义的呀

from flow-builder.

点击节点后drawer弹出，当drawer中form中存在treeSelect这种value值是对象形式，save成功后，再次点击该节点，会报错 drawer中表单代码

  const ConfigForm: React.FC = () => {
  const { selectedNode: node, setDrawerTitle } = useContext(BuilderContext);

  const { saveDrawer: save } = useDrawer();

  const [form] = Form.useForm();
  const [treeData, setTreeData] = React.useState<API.System.DeptTreeUser[]>([]);
  useEffect(() => {
    (async () => {
      setDrawerTitle('配置');
      const { data } = await getDeptTreeUser();
      setTreeData(data as API.System.DeptTreeUser[]);
      form.setFieldsValue({
        name: node!.data?.name,
      });
    })();
  }, []);

  async function handleSubmit() {
    try {
      const values = await form.validateFields();
      save?.(values);
    } catch (e) {
      const values = form.getFieldsValue();
      save?.(values, !!e);
    }
  }
  return (
    <div>
      <Form<{ name: API.System.DeptTreeUser }> form={form}>
        <Form.Item name="name" label="处理人" rules={[{ required: true, message: '请选择处理人' }]}>
          <TreeSelect
            allowClear
            treeData={treeData}
            placeholder="请选择处理人"
            showArrow={false}
            filterTreeNode={true}
            showSearch={true}
            popupMatchSelectWidth={false}
            labelInValue={true}
            autoClearSearchValue={true}
            multiple={false}
            treeNodeFilterProp="label"
            fieldNames={{ value: 'id' }}
          />
        </Form.Item>
      </Form>
      <Button.Group>
        <Button type={'primary'} onClick={handleSubmit}>
          确定
        </Button>
      </Button.Group>
    </div>
  );
};

export default ConfigForm;

saveDrawer 只是把数据赋值给了节点的 data，没有做其他的改动

我知道，所以node节点的data属性上能完整获取到保存的数据，但是在drawer回显的时候就报错了，是否是封装表单的时候没考虑到这种情况呢？

这个像是你的 TreeSelect 接收到的数据不太对吧，我没有封装表单，表单全是你自定义的呀

我新建了空白页面没用react-flow-builder试了，没改动代码，正常。。这是treeSelect数据结构

interface DeptTreeUser {
    label: string;
    id: string;
    value: string;
    disabled?: boolean;
    children?: Array<DeptTreeUser>;
  }

应该没毛病啊。。

from flow-builder.

点击节点后drawer弹出，当drawer中form中存在treeSelect这种value值是对象形式，save成功后，再次点击该节点，会报错 drawer中表单代码

  const ConfigForm: React.FC = () => {
  const { selectedNode: node, setDrawerTitle } = useContext(BuilderContext);

  const { saveDrawer: save } = useDrawer();

  const [form] = Form.useForm();
  const [treeData, setTreeData] = React.useState<API.System.DeptTreeUser[]>([]);
  useEffect(() => {
    (async () => {
      setDrawerTitle('配置');
      const { data } = await getDeptTreeUser();
      setTreeData(data as API.System.DeptTreeUser[]);
      form.setFieldsValue({
        name: node!.data?.name,
      });
    })();
  }, []);

  async function handleSubmit() {
    try {
      const values = await form.validateFields();
      save?.(values);
    } catch (e) {
      const values = form.getFieldsValue();
      save?.(values, !!e);
    }
  }
  return (
    <div>
      <Form<{ name: API.System.DeptTreeUser }> form={form}>
        <Form.Item name="name" label="处理人" rules={[{ required: true, message: '请选择处理人' }]}>
          <TreeSelect
            allowClear
            treeData={treeData}
            placeholder="请选择处理人"
            showArrow={false}
            filterTreeNode={true}
            showSearch={true}
            popupMatchSelectWidth={false}
            labelInValue={true}
            autoClearSearchValue={true}
            multiple={false}
            treeNodeFilterProp="label"
            fieldNames={{ value: 'id' }}
          />
        </Form.Item>
      </Form>
      <Button.Group>
        <Button type={'primary'} onClick={handleSubmit}>
          确定
        </Button>
      </Button.Group>
    </div>
  );
};

export default ConfigForm;

saveDrawer 只是把数据赋值给了节点的 data，没有做其他的改动

我知道，所以node节点的data属性上能完整获取到保存的数据，但是在drawer回显的时候就报错了，是否是封装表单的时候没考虑到这种情况呢？

这个像是你的 TreeSelect 接收到的数据不太对吧，我没有封装表单，表单全是你自定义的呀

我新建了空白页面没用react-flow-builder试了，没改动代码，正常。。这是treeSelect数据结构

interface DeptTreeUser {
    label: string;
    id: string;
    value: string;
    disabled?: boolean;
    children?: Array<DeptTreeUser>;
  }

应该没毛病啊。。

如果方便的话，可以 mock 一点数据，发一个 codepen 的在线链接我看一下

from flow-builder.

点击节点后drawer弹出，当drawer中form中存在treeSelect这种value值是对象形式，save成功后，再次点击该节点，会报错 drawer中表单代码

  const ConfigForm: React.FC = () => {
  const { selectedNode: node, setDrawerTitle } = useContext(BuilderContext);

  const { saveDrawer: save } = useDrawer();

  const [form] = Form.useForm();
  const [treeData, setTreeData] = React.useState<API.System.DeptTreeUser[]>([]);
  useEffect(() => {
    (async () => {
      setDrawerTitle('配置');
      const { data } = await getDeptTreeUser();
      setTreeData(data as API.System.DeptTreeUser[]);
      form.setFieldsValue({
        name: node!.data?.name,
      });
    })();
  }, []);

  async function handleSubmit() {
    try {
      const values = await form.validateFields();
      save?.(values);
    } catch (e) {
      const values = form.getFieldsValue();
      save?.(values, !!e);
    }
  }
  return (
    <div>
      <Form<{ name: API.System.DeptTreeUser }> form={form}>
        <Form.Item name="name" label="处理人" rules={[{ required: true, message: '请选择处理人' }]}>
          <TreeSelect
            allowClear
            treeData={treeData}
            placeholder="请选择处理人"
            showArrow={false}
            filterTreeNode={true}
            showSearch={true}
            popupMatchSelectWidth={false}
            labelInValue={true}
            autoClearSearchValue={true}
            multiple={false}
            treeNodeFilterProp="label"
            fieldNames={{ value: 'id' }}
          />
        </Form.Item>
      </Form>
      <Button.Group>
        <Button type={'primary'} onClick={handleSubmit}>
          确定
        </Button>
      </Button.Group>
    </div>
  );
};

export default ConfigForm;

你设置了 labelInValue: true，所以表单的数据已经不对了，你可以打印出来看看

from flow-builder.

应该是我这边环境的问题，使用干净的环境试了没复现出来，已经使用其他方式解决，谢谢

from flow-builder.