родительский обработчик родительского хука React Custom Hook не сохраняет состояние пользовательских хуков - PullRequest
Новая
       1

родительский обработчик родительского хука React Custom Hook не сохраняет состояние пользовательских хуков

0 голосов
/ 16 июня 2020

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

Но по какой-то причине мне нужно обновить данные от родителя. В этом случае я доставил обработчик для пользовательских хуков от родителя, и этот обработчик обращается к состоянию хуков. 

/* this is hook */
    const customhook = useCustomHook({ init: true });
/* parent is calling hook function to update data */
const actionFromParent = e => {
    customhook.UpdateFromParentAction("First Data intialized");
  };

/* hook is assigning parent function */
const actionFirst = e => {
    customhook.SomeAction({
      data: "action first",
      init: true,
      handler: actionFromParent
    });
  };

/* inside hook, it is calling parent function */
{state.handler && <button onClick={state.handler}>Click Last</button>}

Я добавил сюда код песочницы: https://codesandbox.io/s/zen-napier-i6v5g?file= / src / custom.jsx: 790-860

1 Ответ

1 голос
/ 17 июня 2020

Когда actionFromParent создает ссылку на это: 

const UpdateFromParentAction = data => {
  setState({
    ...state,
    data
  });
};

Оператор распространения ...state обращается к значениям объекта точно, когда эта ссылка создается, не , когда в конечном итоге он исполняется. Если вы хотите, чтобы установщик использовал текущие значения при выполнении, вы можете изменить его на это: 

setState(s => {return {...s, data}});

В более общем плане, однако, вы не должны использовать этот метод, чтобы обойти тот факт, что вы передают устаревшие значения вашим функциям. Любые logi c, которые вы хотите синхронизировать с текущим состоянием компонента, должны быть заключены в useEffect, useCallback, useReducer hooks et c. везде, где возможно.

Сохранение собственных функций компонента или обработчика в его собственном состоянии также является классическим c анти-шаблоном, и его следует избегать именно по этой причине. Вы должны вернуть все нужные вам функции из хука в родительский компонент и получить к ним доступ - передача их обратно - это получатель ie в случае катастрофы.

...