Модальный компонент визуализирует дважды при открытии - PullRequest
Новая
       13

Модальный компонент визуализирует дважды при открытии

1 голос
/ 29 мая 2019

Я использую реагирующую пружину, чтобы оживить модал на основе @ reach / dialog. Модал может иметь любых детей. У детей я собираю некоторые данные, основанные на какой-то опоре.

Проблема в том, что вызов fetch выполняется два раза при открытии модального режима. Я думаю, что это, вероятно, связано с тем, как я управляю государством, и это вызывает повторные визуализации.

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

Вот что-то похожее на мой код и как оно работает https://codesandbox.io/s/loving-liskov-1xouh

РЕДАКТИРОВАТЬ: я уже знаю, что если я удаляю анимацию реактивной пружины, двойной рендеринг не произойдет, но я хочу попытаться сохранить анимацию без изменений.

Как вы думаете, вы можете помочь мне определить, где ошибка? (Также высоко ценятся некоторые советы по хорошей практике с крючками).

Ответы [ 3 ]

1 голос
/ 29 мая 2019

рендерит три раза, потому что ваш компонент возврата имеет transitions.map, так как у вас есть три элемента внутри 

    from: { opacity: 0 }
    enter: { opacity: 1 }
    leave: { opacity: 0 }

{children} вызывался два раза, когда isOpen истинно Вы можете решить эту проблему, просто удалив from: { opacity: 0 } и leave: { opacity: 0 }

поэтому измените ваш modal.js => transitions

  const transitions = useTransition(isOpen, null, {    
    enter: { opacity: 1 }
  });
1 голос
/ 29 мая 2019

Проблема в том, что в конце анимации AnotherComponent перемонтируется.Я читал похожие проблемы о реагировать-весной.Одним из способов может быть то, что вы поднимаете состояние из AnotherComponent в index.js.Таким образом, состояние не будет потеряно при перемонтировании, и вы можете предотвратить повторную загрузку данных. 

const AnotherComponent = ({ url, todo, setTodo }) => {
  useEffect(() => {
    if (todo.length === 0) {
      axios.get(url).then(res => setTodo(res.data));
    }
  });
....
}

Вот моя версия: https://codesandbox.io/s/quiet-pond-idyee

1 голос
/ 29 мая 2019

Я проверил, и он визуализируется дважды из-за анимации в модальном компоненте, когда анимация завершена, модальная визуализация выполняется второй раз, когда я закомментировал фрагмент, отвечающий за анимацию, Модальная отрисовка выполняется только один раз. 

 const Modal = ({ children, toggle, isOpen }) => {
  // const transitions = useTransition(isOpen, null, {
  //   from: { opacity: 0 },
  //   enter: { opacity: 1 },
  //   leave: { opacity: 0 }
  // });
  console.log("render");
  const AnimatedDialogOverlay = animated(DialogOverlay);
  // return transitions.map(
  //   ({ item, key, props }) =>
  //     item && (
    return (
        <AnimatedDialogOverlay isOpen={isOpen}>
          <DialogContent>
            <div
              style={{
                display: `flex`,
                width: `100%`,
                alignItems: `center`,
                justifyContent: `space-between`
              }}
            >
              <h2 style={{ margin: `4px 0` }}>Modal Title</h2>
              <button onClick={toggle}>Close</button>
            </div>
            {children}
          </DialogContent>
        </AnimatedDialogOverlay>
    );
  //     )
  // );
};
...