Javascript 我可以对多个表单使用相同的上下文吗？

我想使用React上下文保存表单的状态。 我可以为不同的表单使用相同的上下文吗

这是我的示例代码。我在这个示例中使用了React-Hooks API

在FormContext.js中

...
import {FormReducer} from './FormReducer';

export const FormContext = React.createContext({});

const FormContextProvider = (props) => {

  const formInit = props.value ? props.value : {};

  const [formContext, dispatch] = useReducer(FormReducer, formInit);

  return (
    <FormContext.Provider value={{formContext, dispatch}}>
      {props.children}
    </FormContext.Provider>
  );
}

export default FormContextProvider;

...
import {FormContext} from './FormContext';

const Form = ({name, fields}) => {

  const {formContext, dispatch} = useContext(FormContext);

  const inputOnChange = (e, label) => {
    let value = {};
    value[label] = e.target.value;
    dispatch({type:'ChangeField', value: value});
  }

  const renderInputs = () => {
    return fields.map(field => {
      return (
        <div className="field">
          <label>{field}</label>
          <input 
            type="text" 
            value={formContext[field] ?formContext[field]: '' } 
            onChange={(e) => inputOnChange(e, field)} 
            />
        </div>
      )}
    );
  }

  return (
    <div className="form">
      <h3>{name}</h3>
      <form>
        {formContext ? renderInputs() : <React.Fragment/>}
      </form>
    </div>
  );
}

Form.defaultProps = {
  name: '',
  fields: []
}

。。。
从“/FormReducer”导入{FormReducer}；
export const FormContext=React.createContext（{}）；
const FormContextProvider=（道具）=>{
const formInit=props.value？props.value:{}；
const[formContext，dispatch]=useReducer（FormReducer，formInit）；
返回(
{props.children}
);
}
导出默认FormContextProvider；

我的表单组件form.js

...
import {FormReducer} from './FormReducer';

export const FormContext = React.createContext({});

const FormContextProvider = (props) => {

  const formInit = props.value ? props.value : {};

  const [formContext, dispatch] = useReducer(FormReducer, formInit);

  return (
    <FormContext.Provider value={{formContext, dispatch}}>
      {props.children}
    </FormContext.Provider>
  );
}

export default FormContextProvider;

...
import {FormContext} from './FormContext';

const Form = ({name, fields}) => {

  const {formContext, dispatch} = useContext(FormContext);

  const inputOnChange = (e, label) => {
    let value = {};
    value[label] = e.target.value;
    dispatch({type:'ChangeField', value: value});
  }

  const renderInputs = () => {
    return fields.map(field => {
      return (
        <div className="field">
          <label>{field}</label>
          <input 
            type="text" 
            value={formContext[field] ?formContext[field]: '' } 
            onChange={(e) => inputOnChange(e, field)} 
            />
        </div>
      )}
    );
  }

  return (
    <div className="form">
      <h3>{name}</h3>
      <form>
        {formContext ? renderInputs() : <React.Fragment/>}
      </form>
    </div>
  );
}

Form.defaultProps = {
  name: '',
  fields: []
}

。。。
从“/FormContext”导入{FormContext}；
常量形式=（{name，fields}）=>{
const{formContext，dispatch}=useContext（formContext）；
常量输入更改=（e，标签）=>{
让值={}；
值[标签]=e.target.value；
分派（{type:'ChangeField'，value:value}）；
}
常量renderInputs=（）=>{
返回字段。映射（字段=>{
返回(
{field}
输入更改（e，字段）}
/>
)}
);
}
返回(
{name}
{formContext？renderInputs（）：}
);
}
Form.defaultProps={
名称：“”，
字段：[]
}

在Index.js中，我在应用程序中包装了两个表单组件

const formOne = { name: 'Form One', fields: ['username', 'email'] };
const formTwo = { name: 'Form Two', fields: ['name', 'email'] };

<App>
  <Form {...formOne}/>
  <Form {...formTwo}/>
</App>

const formOne={name:'formOne'，字段：['username'，'email']}；
const formTwo={name:'formTwo'，字段：['name'，'email']}；

在App.js中，我有两个按钮来决定应该显示哪个表单

const App = (props) => {

  const [form, setForm] = useState('');

  const formBtnOnClick = (form) => {
    setForm(form);
  }

  const renderForm = () => {

    if (props.children) {
      const selectForm = props.children.find(child => child.props.name.toLowerCase().includes(form));

      if (selectForm) {
        return (
          <FormContextProvider>
            {selectForm}
          </FormContextProvider>
        )
      } else {
        return (<React.Fragment></React.Fragment>);
      }
    }

  }

  return (
    <div className="App">
      App
      <button onClick={(e) => formBtnOnClick('one')}>One</button>
      <button onClick={(e) => formBtnOnClick('two')}>Two</button>

      <Header text="Form" />
      {renderForm()}
      <Header />
    </div>
  );
}

const-App=（道具）=>{
const[form，setForm]=useState（“”）；
const formBtnOnClick=（form）=>{
setForm（表格）；
}
常量渲染格式=（）=>{
如果（道具、儿童）{
const selectForm=props.children.find（child=>child.props.name.toLowerCase（）.includes（form））；
如果（选择表格）{
返回(
{selectForm}
)
}否则{
返回（）；
}
}
}
返回(
应用程序
formBtnOnClick（'one'）}>one
formBtnOnClick（'two'）}>two
{renderForm（）}
);
}

当窗体在单击按钮后更改，但上下文没有重新显示时， 上一个表单的值仍然存在。我在表单中更改了电子邮件的值，当我单击表单二时，电子邮件值仍然存在

---

是我做错了什么，还是有更好的方法解决这个问题。

在这种情况下，您必须通过

dispatch（'clear_FORM'）

将所有值设置为默认值来清除状态

case CLEAR_FORM:
      return {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
      };

---

大多数react表单库在顶部组件中不使用表单上下文。它们将上下文提供程序插入表单组件。这允许在不手动清除状态的情况下，为不同的表单提供分离的状态。我应该如何准确地执行？我想知道为什么上下文是相同的，但是如果我将App.js

renderForm（）

更改为

props.children

，这两个表单就不会有上下文问题。