React - useMemo выдает предупреждение, хотя программа работает нормально. (useMemo имеет ненужную зависимость)

Прежде всего извините за плохой код. Я новичок в React, поэтому, пожалуйста, извините меня: P. Здесь я создал 2 кнопки, добавить и изменить подделку. Когда я нажимаю «Добавить», он не будет повторно отображать дочерний компонент, а когда я нажимаю «Изменить подделку», он повторно отображает компонент, потому что моя зависимость изменилась в useMemo, и он создает и отправляет новые реквизиты объекта дочернему элементу. Но я получаю предупреждение для useMemo о том, что это ненужная зависимость, хотя мне нужна зависимость. Как я могу уйти, что предупреждение уйти. Есть лучший способ сделать это?

Примечание. Мой дочерний компонент является фиктивным компонентом. Он ничего не делает с этими реквизитами.

import Child from "./Child";

const Parent = () => {
  const [count, setCount] = useState(0);
  const fakeValue = useRef(10);

  const randomProp = useMemo(() => {
    return { val: fakeValue.current };
  }, [fakeValue.current]);

  const changeFake = () => {
    fakeValue.current = fakeValue.current + 1;
    setCount(count + 1);
  };

  return (
    <>
      <div>{count}</div>
      <div>{fakeValue.current}</div>
      <button onClick={() => setCount(count + 1)}>add</button>
      <button onClick={() => changeFake()}>Change fake</button>
      <Child randomProp={randomProp} />
    </>
  );
};

export default Parent;

Выходная ссылка: https://i.stack.imgur.com/5spw1.png Ссылка CodeSandbox: https://codesandbox.io/s/silly-pine-fzjw9?file=/src/

Может глупый вопрос. Но я был бы признателен за отзывы от сообщества, пожалуйста :)


reactjs react-usememo
person EaGle Network    schedule 13.06.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Когда вы передаете ссылку fakeValue.current непосредственно в зависимость от useMemo, она не изменит значение randomProp. тогда дочерний компонент не будет re-render. Итак, вам нужно сделать что-то вроде этого.

const randomValue = fakeValue.current;

  const randomProp = useMemo(() => {
    return { val: randomValue };
  }, [randomValue]);

Если повторный рендеринг не требуется, просто хотите убрать предупреждение, можно удалить fakeValue.current зависимость

Модифицированный код ссылки CodeSandbox: https://codesandbox.io/s/stoic-thunder-9ylxi?file=/src/Parent.js

person sathishk2030    schedule 13.06.2021
comment
Когда fakeValue.current изменяется, он перерисовывает компонент. Но единственное, что я получаю это предупреждение. Но я вижу, что если я сохраню его в отдельной переменной, а затем передам эту переменную, ошибка больше не существует. Спасибо за это. Тем не менее мне кажется странным, что если мы передаем fakeValue.current, он выдает предупреждение, хотя работает совершенно нормально. - person EaGle Network; 13.06.2021

arrow_upward
1
arrow_downward

fakeValue.current является ненужной зависимостью, поскольку ее изменение не приводит к повторному рендерингу компонента. Мы не добавляем ссылки в качестве зависимостей.

Вы можете удалить предупреждение, добавив пустой массив в качестве зависимости к useMemo.

const randomProp = useMemo(() => {
  return { val: fakeValue.current };
}, []); // Pass an empty array like this

https://codesandbox.io/s/usememo-warning-67955446-5x8j3

Дайте мне знать, если вам нужна дополнительная поддержка.

person Yushan    schedule 13.06.2021
comment
Но теперь проблема в том, что при изменении fakeValue.current я хочу, чтобы мой ребенок перерисовал. Если я передам пустой массив. Он не будет повторно отображать дочерний элемент, даже если fakeValue.current изменился - person EaGle Network; 13.06.2021
comment
Если вы хотите повторно отобразить компонент, единственный рекомендуемый способ — создать состояние и обновить его. - person Yushan; 13.06.2021
comment
Кроме того, я рекомендую вам обратиться к этой статье, прежде чем использовать хуки, такие как useMemo. - person Yushan; 13.06.2021
comment
Спасибо Юшан. Проверим это. Я новичок в React, и я получаю эти странные сценарии, когда пробую разные вещи: P - person EaGle Network; 13.06.2021