jd-opensource / drip-form

基于React和JSONSchema的动态表单解决方案
https://jd-opensource.github.io/drip-form/
MIT License
613 stars 73 forks source link

[Bug] <title>form-generator动态设置schema的时候,中间的可视区没有绘制对应的表单 #272

Closed yuluojun closed 10 months ago

yuluojun commented 11 months ago

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

通过useState设置form-generator schema的时候,中间的可视区并没有绘制对应的表单。 代码如下: `import React, { memo, useEffect, useRef, useState } from 'react'; import DripFormGenerator from '@jdfed/form-generator'; import '@jdfed/form-generator/dist/index.css';

const Edit = memo(() => { const generatorRef = useRef(); const [schema, setSchema] = useState({});

useEffect(() => { const schemaJson = { type: 'object', validateTime: 'change', ui: { containerStyle: { width: '33%', padding: '0 10px 0 0', }, }, theme: 'antd', schema: [ { type: 'array', title: '多选框', ui: { type: 'checkbox', theme: 'antd', }, fieldKey: 'checkbox_ZkO_mT', }, { type: ['string', 'number', 'array'], title: '选择器', ui: { type: 'select', theme: 'antd', style: { width: 120, }, options: [], }, fieldKey: 'select_M0AZMz', }, { type: 'string', title: '输入框', ui: { type: 'text', style: { width: '100%', }, theme: 'antd', }, fieldKey: 'text_HYrE2k', }, { type: 'array', title: '级联选择', ui: { type: 'cascader', theme: 'antd', }, fieldKey: 'cascader_j2ndy2', }, { type: 'string', title: '时间选择框', ui: { type: 'timePicker', theme: 'antd', }, fieldKey: 'timePicker_y9cE6R', }, { type: 'number', title: '滑动输入条', ui: { type: 'slider', theme: 'antd', }, fieldKey: 'slider_a-imkw', }, ], }; generatorRef.current = schemaJson; const newSchema = { ...generatorRef.current }; setSchema(newSchema); });

return (

{console.log('schema->', schema)}

); }); Edit.displayName = 'GeneratorApp';

export default Edit; ` A20916BE-E072-4305-926B-FF40DE2F8B58

Steps to reproduce

在useEffect里面通过setSchema设置最新的schema,generator里面通过schema属性设置后,在可视区没有渲染对应的表单,还是显示的默认表单。

Current behavior

在useEffect里面通过setSchema设置最新的schema,generator里面通过schema属性设置后,在可视区没有渲染对应的表单,还是显示的默认表单。

Expected behavior

在useEffect里面通过setSchema设置最新的schema,generator里面通过schema属性设置后,在可视区能够渲染对应的表单

Your environment

Reproducible demo

No response

Self-service

mengshang918 commented 11 months ago

form-generator目前作为表单生成器通过设置schema可以在初始化的时候设置默认的表单。后续如果需要更新初始化的schema,可以设置key。 获取当前配置的表单,可通过ref.current.schema获取 具体例子:https://stackblitz.com/edit/drip-form-e6dky1?file=src%2FApp.tsx

github-actions[bot] commented 11 months ago

This issue has been automatically marked as no-issue-activity because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.