Reactjs 使用上下文API处理React中的表单

在我的管理面板的电子商务项目中，有一些表单用于编辑有关类别、产品、用户等的信息。 我正在为我的全局状态使用上下文API。 因此，在我使用的

类别edit

组件中

<Consumer>
  {value => {
    const { categories, dispatch } = value;
    if (categories === undefined || categories.length === 0) {
      return <Spinner />;
    } else {
      const category = categories.filter(category => {
        if (this.props.match.params.id !== undefined) {
          return category.id == this.props.match.params.id;
        } else {
          return category;
        }
      });
      return category.map(category => {
        return (
          <React.Fragment key={category.id}>
            <h1 className="title">Edit category</h1>
            <form className="form" onSubmit={this.saveChanges.bind(this, dispatch)}>
              <input type="hidden" value={category.id} name="cat_id" onChange={this.handleChange} />
              <label htmlFor="cat_name" className="form__label">
                Category name
              </label>
              <br />
              <input type="text" className="form__input-field" name="cat_name" value={category.name} onChange={this.handleChange} />
              <br />
              <label htmlFor="cat_title" className="form__label">
                Category title
              </label>
              <br />
              <input type="text" className="form__input-field" name="cat_title" value={category.title} onChange={this.handleChange} />
              <br />
              <label htmlFor="cat_description" className="form__label">
                Category discription
              </label>
              <br />
              <textarea className="form__input-field" name="cat_description" value={category.description} onChange={this.handleChange} />
              <br />
              <button type="submit" className="admin__button admin__button-success">
                Save
              </button>
              <button type="button" className="admin__button admin__button-secondary">
                Cancel
              </button>
            </form>
            {this.state.isSaved && <div>Changes saves</div>}
          </React.Fragment>
        );
      });
    }
  }}
</Consumer>

显然，没有发生任何事情，因为值没有从

CategoryEdit

组件

状态

绑定。 另外，将

setState（）

放入

componentDidMount（）

也不起作用，因为

Provider

中的数据是以异步方式获取的，所以首先

值

为空。 我不想将此表单值更改绑定到全局状态，因为可以取消此更改，并且在提交表单后应重新提取这些更改。 所以我想要的是 -要使用

提供程序中的值最初填写表单

， -然后将它们传递到

CategoryEdit

状态一次， -然后处理组件状态的更改， -使用异步

fetch（）

内部

CategoryEdit

组件将数据提交到数据库 -通过

action

告诉

提供者它可以更新

这是做这些事情的正确模式，还是有更好的方法在React中使用上下文处理表单。
好的，我已经解决了。
我已经将组件从类组件更改为功能组件，并使用
React Hooks
完成了整个工作

如果有人感兴趣，请留下评论，我将粘贴整个组件代码。
是的，这是正确的方法。确保使用上下文中的数据填充
CategoryEdit
的本地状态。然后使用本地状态而不是上下文填充表单中的输入字段。请确定：）。
handleChange = e => {
  e.preventDefault();
  this.setState({
    [e.target.name]: e.target.value
  });
}