Как сбросить дочерний компонент из родительского, используя React Context и Hooks

Question

Я играю с контекстом React и хуками. Я хочу иметь повторно используемый компонент редактора, в котором я смогу редактировать пользователей. Затем я буду использовать его со страниц NewUser и EditUser, чтобы NewUser пропустил пустого пользователя, а EditUser пропустил существующего пользователя.

Вот как я реализовал Editor и его контекст

const UserEditorContext = createContext({
  user: {},
  onSubmit: user => {}
});

const UserEditor = () => {
  const context = useContext(UserEditorContext);
  const [user, setUser] = useState({ ...context.user });
  const setUserProp = e => setUser({ ...user, [e.target.name]: e.target.value });
  const handleSubmit = e => {
    e.preventDefault();
    context.onSubmit(user);
  };
  return (
    <form onSubmit={handleSubmit}>
      Username:{" "}
      <input type="text" name="username" value={user.username} onChange={setUserProp} />
      Password:{" "}
      <input type="password" name="password" value={user.password} onChange={setUserProp} />
      <input type="submit" value="Submit" />
    </form>
  );
};

Вот как я это использую со страницы NewUser

const NewUserPage = () => {
  const [user, setUser] = useState({});
  const createUser = user => {
    alert(JSON.stringify(user)); // todo http post
    setUser({}); // clear form. THIS DOES NOT WORK
  };
  return (
    <UserEditorContext.Provider value={{ user, onSubmit: createUser }}>
      <UserEditor />
    </UserEditorContext.Provider>
  );
};

Проблема

После создания нового пользователя я хочу очистить форму. Однако моя попытка очистить форму, setUser({}) не работает. Это не вызывает никаких ошибок или чего-либо еще. Он просто не обновляет элемент управления редактора.

Вот полный пример: https://codesandbox.io/s/hopeful-tereshkova-dwn8h

Answer 1

Вы можете добавить setUser из UserEditor компонента к context.onSubmit следующим образом:

const handleSubmit = e => {
  e.preventDefault();
  context.onSubmit(user, setUser);
};

тогда компонент NewUserPage будет:

const NewUserPage = () => {
  const emptyUser = {
    username: "",
    password: ""
  };

  const createUser = (user, setUser) => {
    alert(JSON.stringify(user)); // todo http post
    setUser(emptyUser); // clear form
  };

  return (
    <UserEditorContext.Provider value={{ user: emptyUser, onSubmit: createUser }}>
      <UserEditor />
    </UserEditorContext.Provider>
  );
};

рабочий пример :