使用rjsf ObjectFieldTemplate时输入框频繁失焦问题求助

我在package.json中安装了版本为^5.0.0-beta.10的rjsf，能正常渲染react-jsonschema-form的Form组件，但使用自定义ObjectFieldTemplate时，字符串输入框每输入一个字符就会失去焦点，必须重新点击才能继续输入。

我已经尝试将ObjectFieldTemplate移到自定义Form组件定义之外，但问题仍未解决；也参考过状态设置相关的方案，但我使用的是函数式组件，不确定是否适用。

相关代码如下：

import validator from "@rjsf/validator-ajv6"; 
import Form from "@rjsf/mui";
const ObjectFieldTemplate = (props) => {
    // 一些业务逻辑计算
    return (
        <div>
            <h3>{props.title}</h3>
            <p>{props.description}</p>
            {props.properties.map(function (field) {
                // 确定样式的逻辑
                return (<fieldset style={style} key={uuidv4()}>{field.content}</fieldset>);
            })}
        </div>
    );
}

const JsonSchemaForm = (props) => {
    // 定义schema和uiSchema
    const onSubmit = ({formData}, e) => {
        // 提交逻辑
    }
    const onError = (errors) => {console.log(errors);}

    return (<Form 
        schema={schema}
        validator={validator}
        formData={data}
        uiSchema={uiSchema}
        onSubmit={onSubmit}
        onError={onError}
        templates={{ ObjectFieldTemplate }}
        />);
}

问题根源在于你在props.properties.map循环中使用uuidv4()作为fieldset的key。每次组件渲染时，uuidv4()都会生成新的随机值，React会判定每个fieldset都是全新的组件，进而卸载旧组件并重新挂载新组件，这直接导致输入框失去焦点。

解决方法很简单，把key替换为每个field的稳定唯一标识，比如field.name或者field.key（根据rjsf的字段结构，field.name通常是唯一的）：

{props.properties.map(function (field) {
    // 确定样式的逻辑
    return (<fieldset style={style} key={field.name}>{field.content}</fieldset>);
})}

另外请确认ObjectFieldTemplate确实定义在JsonSchemaForm组件外部，避免每次渲染Form时重新创建模板组件，这也会引发不必要的重渲染问题。

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