Javascript 在REACTE with Redux状态下重新提交的整个表单

我有动态JSON数据，并且有一个自定义方法来遍历JSON，以便在页面上动态呈现表单。JSON模式的原因是构建各种未预定义的表单

我已经连接了Redux，以便将下面的模式和FormValue指定为这个类的支柱。因此，表单使用正确的标签、正确的输入字段类型等正确呈现。当字段上发生onChange事件时，应用程序状态（在formData下）将正确更新。但我注意到，当formData在应用程序状态中更改时，整个表单将重新呈现，而不仅仅是“特定字段”。这是因为我将表单值作为对象存储在formData下，如下所示？我如何避免这个问题

formData = {
   userName: 'username',
   firstName: 'firstName
}

示例模式

const form =  {
  "fields":[
            {
               "label":"Username",
               "field_type":"text",
               "name":"username"
            },
            {
               "label":"First Name",
               "field_type":"text",
               "name":"firstName"
            }
    ]
  }

雷多克斯州

const reducer = combineReducers({
   formSchema: FormSchema,
   formData: Form
});

//渲染方法

render() {
      const { fields } = this.props.form,
      forms = fields.map(({label, name, field_type, required }) => {
      const value = value; //assume this finds the correct value from the "formData" state.
      return (
        <div key={name}>
          <label>{label}</label>
          <input type={field_type}
            onChange={this.onChange}
            value={value}
            name={name} />
        </div>
      );
    })
}

---

从您的示例中，我不确定，但是如果您在单个render（）方法中渲染整个内容，则会再次渲染组件。这就是问题所在，组件。如果您试图拥有多个组件，那么应该尽可能地将它们拆分。否则，如果状态更改，将触发对唯一存在的组件的重新渲染。 尽量打破它

提示：（不知道他们是否适用，但可能）

• 使用

  ref={}

  s
• 实现

  shouldComponentUpdate（）

---

编辑：刚刚考虑过这个问题，但是您是否在您的状态中存储字段的值？这感觉不对。请务必仔细阅读有关受控部件的React指南。（例如，尝试使用普通的

s而不是输入进行渲染，并收听onKeyPress。它是否仍然有效？如果不起作用，您可能误用了value属性）

@rom grk-是的，正在使用状态更新value属性。我没有把所有的代码都放在这里，因为太冗长了。我使用shouldComponentUpdate（）实现了上面的建议，它只更新了道具更改的组件。

onChange(event) {
   this.props.dispatch(updateFormData({
      field: event.target.name,
      value: event.target.value
    }));
}