react-jsonschema-form更新state中schema后表单未更新问题求助

我之前也碰到过类似的坑，react-jsonschema-form的Form组件有时候不会自动感知到schema的深层变化，尤其是像enum这类数组的更新。咱们一步步拆解解决：

问题根源 #

react-jsonschema-form内部对传入的props做了浅比较，如果你只是修改现有schema对象里的enum数组（而非创建全新的schema对象），Form组件会判定props没有变化，因此不会触发重新渲染。另外，componentWillReceiveProps已经是React官方标记为废弃的生命周期钩子，这也可能带来一些不可预期的行为。

具体解决方案 #

1. 更新schema时生成新的对象引用

当你从props接收新的enum数组时，不要直接修改原有schema，而是创建一个全新的schema对象，确保引用发生变更：

componentWillReceiveProps(nextProps) {
  if (nextProps.enumArray !== this.props.enumArray) {
    // 逐层拷贝schema结构，替换enum字段
    const newSchema = {
      ...this.state.schema,
      properties: {
        ...this.state.schema.properties,
        test: {
          ...this.state.schema.properties.test,
          enum: nextProps.enumArray
        }
      }
    };
    this.setState({ schema: newSchema });
  }
}

这种方式能让Form组件检测到schema的引用变化，从而触发重新渲染。

2. 给Form组件绑定动态key

如果上面的方法还不生效，可以给Form组件添加一个随schema内容变化的key，强制组件重新渲染：

<Form
  key={JSON.stringify(this.state.schema)}
  schema={this.state.schema}
  onChange={this.handleChange}
/>

这里用JSON.stringify(this.state.schema)作为key，只要schema的内容发生变化，key就会同步改变，React会销毁旧的Form组件并创建新实例，确保表单完全更新。

3. 替换废弃的生命周期钩子

建议把componentWillReceiveProps替换为React推荐的componentDidUpdate，避免后续版本的兼容性问题：

componentDidUpdate(prevProps) {
  if (prevProps.enumArray !== this.props.enumArray) {
    const newSchema = {
      ...this.state.schema,
      properties: {
        ...this.state.schema.properties,
        test: {
          ...this.state.schema.properties.test,
          enum: this.props.enumArray
        }
      }
    };
    this.setState({ schema: newSchema });
  }
}

按照上面的方式修改后，当你触发props的enum数组更新时，表单的选项应该会同步切换成[one, two]了。

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