Сохраните последний элемент изменяемой опоры.

#reactjs

Вопрос:

Я получаю массив arr из реквизитов компонента, props.arr который может изменяться внутри myComponent , поэтому при myComponent первом рендеринге я хочу получить последний элемент arr и сохранить его для последующего использования. Каков наилучший способ достичь этого?

 function myComponent(props: any) {
    // props.arr = ["1", "2", "3", "4"]
    const [lastVal, setLastVal] = useState(0);

    // I can do it like that, but want a better solution
    useEffect(() => {
       setLastVal(props.arr[props.arr.length - 1]);
    }, []);
} 
 

Комментарии:

1. Что вы подразумеваете под лучшим решением? Твой нынешний работает, верно?

2. @tdranv да, но я ищу более простое решение без использования крючков..

3. Что ж, крючки в настоящее время лежат в основе функциональных компонентов React. Возможно, вы сможете обойти проблему с помощью опции » localStorage Но крючки» намного лучше. Взгляните на ответ @Ryan Le для решения пользовательских крючков.

Ответ №1:

Один из хороших способов-реализовать такой usePrevious крючок:

 import { useEffect, useRef } from 'react';

// Refer to the previous value
export function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>();

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
}
 

Это всегда будет возвращать предыдущие значения, которые вы передаете ему.