ProFormDependency与StepsForm相结合的正确使用姿势？

[250king]

我想坐到第一步选择用户后然后选择订单，但发现不起作用这是为什么

<StepsForm.StepForm title="选择用户" name="user">
    <Form.Item name="userId" rules={[{required: true, message: "请选择用户"}]}>
        <UserTable/>
    </Form.Item>
</StepsForm.StepForm>
<StepsForm.StepForm title="选择订单" name="choice">
    <ProFormDependency name={["userId"]} ignoreFormListField>
        {({userId}) => {
            return (
                <Form.Item name="orderIds" rules={[{required: true, message: "请选择订单"}]}>
                    <OrderCheckTable userId={userId?.[0]}/>
                </Form.Item>
            );
        }}
    </ProFormDependency>
</StepsForm.StepForm>

const UserTable = (props: {
    value?: React.Key[],
    onChange?: (value: React.Key[]) => void,
}) => {
    const pathname = usePathname();
    const columns: ProColumns[] = [
        {
            title: "ID",
            dataIndex: "id",
            sorter: true,
        },
        {
            title: "QQ",
            dataIndex: "qq",
            sorter: true,
            search: false,
            render: (_, record) => (
                <Space size="middle" align="center">
                    <Avatar src={`https://q1.qlogo.cn/g?b=qq&nk=${record.qq}&s=0`}/>
                    <div>
                        <Typography>{record.name}</Typography>
                        <Typography style={{fontSize: 12}}>{record.qq}</Typography>
                    </div>
                </Space>
            ),
        },
        {
            title: "邮箱",
            dataIndex: "email",
            sorter: true,
            search: false,
        },
    ];

    return (
        <BaseTable
            columns={columns}
            rowSelection={{
                type: ll(pathname) ? "checkbox" : "radio",
                preserveSelectedRowKeys: true,
                selectedRowKeys: props.value,
                onChange: (selectedRowKeys) => {
                    props.onChange?.(selectedRowKeys);
                },
            }}
            tableAlertRender={ll(pathname) ? undefined : false}
            request={async (params, sort) => {
                const filter : Filter = [
                    ...(params.id ? [{field: "id", operator: "eq" as const, value: Number(params.id)}] : []),
                ];
                if (ll(pathname)) {
                    filter.push({field: "lists.none.groupId", operator: "eq", value: params.groupId});
                }
                if (dc(pathname)) {
                    filter.push({field: "lists.some.group.ended", operator: "eq", value: false});
                }
                const res = await trpc.userGetAll.query({
                    filter: filter,
                    search: params.keyword ?? "",
                    sort: {
                        field: Object.keys(sort).length > 0 ? Object.keys(sort)[0] : "id",
                        order: Object.values(sort)[0] === "descend"? "desc" : "asc",
                    },
                    page: {
                        size: params.pageSize,
                        current: params.current,
                    },
                });
                return {
                    data: res.items,
                    success: true,
                    total: res.total,
                };
            }}
        />
    );
};

const OrderCheckTable = (props: {
    value?: React.Key[],
    onChange?: (value: React.Key[]) => void,
    isShow?: boolean,
    userId?: number,
}) => {
    const pathname = usePathname();
    const columns: ProColumns[] = [
        {
            title: "ID",
            dataIndex: "id",
            sorter: true,
        },
        {
            title: "用户",
            dataIndex: "userId",
            sorter: true,
            render: (_, record) => (
                <Space size="middle" align="center">
                    <Avatar src={`https://q1.qlogo.cn/g?b=qq&nk=${record.user.qq}&s=0`}/>
                    <div>
                        <Typography>{record.user.name}</Typography>
                        <Typography style={{fontSize: 12}}>{record.user.qq}</Typography>
                    </div>
                </Space>
            ),
            renderFormItem: () => <UserFilter isShow={props.isShow}/>,
        },
        {
            title: "商品",
            dataIndex: "itemId",
            sorter: true,
            render: (_, record) => (
                <div>
                    <Typography>{record.item.name}</Typography>
                    <Typography style={{fontSize: 12}}>{record.item.group.name}</Typography>
                </div>
            ),
            renderFormItem: () => <ItemFilter isShow={props.isShow}/>,
        },
        {
            title: "团购",
            dataIndex: ["item", "groupId"],
            hideInTable: true,
            renderFormItem: () => <GroupFilter isShow={props.isShow}/>,
        },
        {
            title: "数量",
            dataIndex: "count",
            valueType: "digit",
            sorter: true,
            search: false,
        },
        {
            title: "创建时间",
            dataIndex: "createdAt",
            valueType: "dateTime",
            sorter: true,
            search: false,
        },
        {
            title: "操作",
            valueType: "option",
            width: 150,
            render: (_, record) => [
                <Popover key="comment" content={record.comment}>
                    <Button icon={<MessageOutlined/>} disabled={!record.comment} size="small" type="link"/>
                </Popover>,
            ],
        },
    ];

    return (
        <BaseTable
            columns={columns}
            rowSelection={{
                type: "checkbox",
                preserveSelectedRowKeys: true,
                selectedRowKeys: props.value? props.value : [],
                onChange: (selectedRowKeys) => {
                    props.onChange?.(selectedRowKeys);
                },
            }}
            request={async (params, sort) => {
                const filter : Filter = [
                    ...(params.id ? [{field: "id", operator: "eq" as const, value: Number(params.id)}] : []),
                    ...(params.userId ? [{field: "userId", operator: "eq" as const, value: Number(params.userId)}] : []),
                    ...(params.itemId ? [{field: "itemId", operator: "eq" as const, value: Number(params.itemId)}] : []),
                    ...(params.item?.groupId ? [{field: "item.groupId", operator: "eq" as const, value: Number(params.item.groupId)}] : []),
                    {field: "item.group.ended", operator: "eq", value: false},
                ];
                if (sc(pathname) || sd(pathname)) {
                    filter.push({field: "shippingId", operator: "eq", value: null});
                }
                if (props.userId) {
                    filter.push({field: "userId", operator: "eq", value: props.userId});
                }
                const res = await trpc.orderGetAll.query({
                    filter: filter,
                    search: params.keyword ?? "",
                    sort: {
                        field: Object.keys(sort).length > 0 ? Object.keys(sort)[0] : "id",
                        order: Object.values(sort)[0] === "descend"? "desc" : "asc",
                    },
                    page: {
                        size: params.pageSize,
                        current: params.current,
                    },
                });
                return {
                    data: res.items,
                    success: true,
                    total: res.total,
                };
            }}
        />
    );
};

[dosubot[bot]]

Hi @250king! I'm Dosu and I’m helping the pro-components team.

你的写法不起作用，核心原因是 StepsForm 的每一步其实是独立的表单实例，字段（如 userId）不会自动同步到下一步，ProFormDependency 只能监听当前 step 的字段，无法跨 step 联动。ignoreFormListField 主要用于 Form.List 场景，对 StepsForm 跨步无效。官方源码和社区都明确指出 StepsForm 没有内置跨步字段联动机制，ProFormDependency 只能监听当前 step 的字段变化，不能监听前一步的字段变化（即使字段名一样）相关源码分析 社区讨论。

正确做法：在第一步 onFinish 时把 userId 保存到外部 state（比如 useState），第二步直接通过 props 把 userId 传给 OrderCheckTable。示例：

const [userId, setUserId] = useState();

<StepsForm
  onFinish={...}
>
  <StepsForm.StepForm
    name="user"
    onFinish={async (values) => {
      setUserId(values.userId);
      return true;
    }}
  >
    <Form.Item name="userId" rules={[{ required: true, message: "请选择用户" }]}>
      <UserTable />
    </Form.Item>
  </StepsForm.StepForm>
  <StepsForm.StepForm name="choice">
    <Form.Item name="orderIds" rules={[{ required: true, message: "请选择订单" }]}>
      <OrderCheckTable userId={userId} />
    </Form.Item>
  </StepsForm.StepForm>
</StepsForm>

这样 OrderCheckTable 就能拿到最新的 userId，实现联动。注意：如果 userId 可能为 0，ProFormDependency 还有已知 bug，会把 0 识别成 undefined，导致依赖失效相关 issue。

总结：StepsForm 跨步字段联动只能靠外部 state 手动同步，ProFormDependency 只适合单表单或 Form.List 内部联动，不能跨 step 自动联动。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}