Как перерендерить компонент с новыми initialValues?

Question

Есть такой код:

<DataForm initialValues={data} />

Компоненты принимает initalValues, это дефолтные значения для внутренних полей компонента. Мне нужно, что когда я запрашиваю новые данные с сервера, то пропса data обновлялась в компоненте, но так как это initalValues, то ничего не срабатывает, новые данные игнорируются.

Как решить данную проблему?

Доступ к DataForm компоненту нет, т.к. это компонент из либы.

Answer 1

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

const [formKey, setFormKey] = useState();

const extraRef = useRef({
  isMounted: false,
});

// ...

useEffect(() => {
  if (extraRef.current.isMounted) {
    setFormKey(Math.random());
  } else {
    extraRef.current.isMounted = true;
  }
}, [data]);

// ...

return (
  <DataForm key={formKey} initialValues={data} />
);

БЛОГ НА HUSL

Как перерендерить компонент с новыми initialValues?

Ответы (1 шт):