React react-jsonschema-form 变更Schema后不重新渲染问题求助

我之前也踩过这个坑！咱们先理清楚问题根源：react-jsonschema-form的Form组件默认会对传入的schema做引用比较来判断是否需要重渲染。如果你只是直接修改原有schema对象内部的属性（比如你改cas字段的enum和enumNames），组件会觉得schema的引用没变化，自然不会触发重渲染——哪怕你控制台里看到数据已经更新了。

解决办法：更新Schema时生成新的对象引用 #

核心思路就是：不要直接修改原有的schema对象，而是创建一个全新的schema对象来替换状态里的旧值。这样React就能检测到props变化，触发表单重渲染。

举个具体的修改示例，把你点击「Change」按钮时的状态更新逻辑改成这样：

handleChange = () => {
  this.setState(prevState => ({
    // 逐层扩展原schema，生成新对象
    schema: {
      ...prevState.schema,
      properties: {
        ...prevState.schema.properties,
        cas: {
          ...prevState.schema.properties.cas,
          enum: ['2', '3'], // 新的选项值
          enumNames: ['Option 2', 'Option 3'] // 新的选项名称
        }
      }
    }
  }));
};

为什么这个方法有效？ #

React组件的更新机制依赖于props/state的引用变化。当你传入Form组件的schema是一个全新的对象时，组件会识别到这个props发生了变化，进而重新渲染表单，把更新后的enum和enumNames渲染到选择框里。

如果你遇到嵌套更深的schema需要更新，可能需要用到深拷贝工具（比如lodash.clonedeep）来确保生成完全独立的新对象，但对于你这个场景，逐层使用扩展运算符做浅拷贝就足够了。

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