почему значение дочернего состояния не обновляется в родительской функции обратного вызова в первый раз? - PullRequest
Новая
       1

почему значение дочернего состояния не обновляется в родительской функции обратного вызова в первый раз?

0 голосов
/ 11 июля 2020

почему значение дочернего состояния не обновляется в родительской функции обратного вызова в первый раз? Я хочу отключить поле ввода в зависимости от состояния.

Песочница с полным примером: https://z3wu6.csb.app/

1 Ответ

1 голос
/ 11 июля 2020

Проблема

Заголовок страницы

Исходное состояние - true, когда вы нажимаете кнопку, вызывается editViewHandler. Он переключает состояние edit для этого компонента, но затем вызывает обратный вызов editCallback с текущим значением edit который изначально равен true. Вы отправляете необновленное значение в обратный вызов! ( вы снова устанавливаете true в UserProfile) Вы можете исправить это, также инвертировав значение edit, отправленное в editCallback. 

const [edit, setEditView] = useState(true);

const editViewHandler = () => {
  setEditView(!edit);
  editCallback(!edit); // <-- send the same value you update state to
};

Я вижу вас Я также продублировал это состояние edit в UserProfile. Вы не должны дублировать состояние. Вам нужен единый источник истины.

Вы уже передали editCallback из UserProfile, поэтому просто прикрепите этот в качестве обратного вызова к кнопке.

Предложение Решение

Переключить значение в обратном вызове источника в UserProfile

const UserProfile = () => {
  const [edit, setEdit] = useState(true);

  const editCallback = () => setEdit(edit => !edit);

  return (
    <>
      <PageHeader
        button
        editCallback={editCallback}
        title="User Profile"
        subtitle="Overview"
      />
      <UserAccountDetails edit={edit} />
    </>
  );
};

И прикрепить к onClick обработчику кнопки 

const PageHeader = ({ title, subtitle, button, editCallback }) => (
  <div className="page-header py-4 withBtn d-flex align-items-center">
    {button ? <Button onClick={editCallback}>Edit Detail</Button> : null}
  </div>
);

Изменить stoi c -night-puu8m

...