Очистить Ссылка в использованииЭффект Очистка

Question

У меня есть ловушка с именем useInitial, определенная как

function useInitial(value) {

  const ref = useRef();

  // Store current value in ref

  useEffect(() => {
    ref.current = value;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Return previous value (happens before update in useEffect above)

  return ref.current;
}

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

const Calculator = ({ current_field }) => {
  const previousField = usePrevious(current_field);
  const intialContent = useInitial(current_field.content);
  useEffect(() => {
    calculateTotals();
    if (previousField) {
      console.log({ intialContent });
      console.log(previousField.content);
    }
    return () => {
     //DO something here to clear and reset the value stored in intialContent.
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [current_field]);
  return null;
};

. Если CurrentField изменится, я нужно значение intialValue для нового поля, а не 1-го.

Answer 1

Я обдумал это и нашел решение.

Хук useInitial может быть изменен так, чтобы иметь массив deps, такой как inupt, как

function useInitial(value, deps) {

  const ref = useRef();

  // Store current value in ref

  useEffect(() => {
    ref.current = value;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);

  // Return previous value (happens before update in useEffect above)

  return ref.current;
}

И тогда использование этого может быть отправкой current_field в массиве deps.

const Calculator = ({ current_field }) => {
  const previousField = usePrevious(current_field);
  const intialContent = useInitial(current_field.content);
  useEffect(() => {
    calculateTotals();
    if (previousField) {
      console.log({ intialContent });
      console.log(previousField.content);
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [current_field]);
  return null;
};

Это повторно вызовет useEffect внутри useInitial после изменения поля, и начальное значение нового поля будет сохранено.