Функция useEffect открыть / закрыть модал, основанный на реквизите, работает только в первый раз (щелчок) - PullRequest
Новая
       12

Функция useEffect открыть / закрыть модал, основанный на реквизите, работает только в первый раз (щелчок)

0 голосов
/ 28 мая 2019

Я изучаю React и использую новые реализованные «Крючки» из Документации.У меня проблема с модальным (диалог из пользовательского интерфейса материала) и функцией открытия / закрытия с использованием функции useEffect ().

Я уже прочитал обе эти статьи: React.useState не перезагружает состояние изprops и Как синхронизировать реквизиты в состояние с помощью React hook: setState ()

Это уже помогло мне, я забыл использовать функцию useEffect (), вместо этого я просто устанавливалuseState из того, что исходит от реквизита.Узнал, что useState будет выполнен только один раз для установки исходного состояния.Но у меня есть еще одна проблема. 

function AddItemModal(props) {
  const [open, setOpen] = useState(props.isOpen);

  useEffect(() => {
    setOpen(props.isOpen);
  }, [props.isOpen]);

  function handleClose() {
    setOpen(false);
  }

Это работает впервые, когда я нажимаю на кнопку добавления (в другом Компоненте) и обрабатываю щелчок (он меняет состояние на true), и я передаюэто как реквизит к модалу.Но когда я нажимаю (в модальном режиме) при закрытии и пытаюсь щелкнуть по добавлению, чтобы открыть его снова, ничего не происходит.В случае необходимости, вот код из компонента, где я обрабатываю щелчок и вызываю модальный. 

function ItemsTable() {
  const [addModalOpen, setAddModalOpen] = React.useState(false);

  const handleAddClick = () => {
    setAddModalOpen(true);
  };

  <Box mt={4} position="fixed" bottom={10} right={10}>
    <Fab color="secondary" aria-label="Add" onClick={handleAddClick}>
      <AddIcon />
    </Fab>
  </Box>
  <AddItemModal isOpen={addModalOpen} />

Ответы [ 2 ]

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

Вы разделили свое модальное состояние на два компонента, что приводит к путанице и может привести к таким ошибкам. Вы должны поместить состояние в одном месте и обновить его при необходимости. В этом случае вы можете сохранить модальное состояние в ItemsTable и передать обработчик для модального доступа.

Что-то вроде: 

function ItemsTable() {
  const [addModalOpen, setAddModalOpen] = React.useState(false);

  const handleAddClick = () => {
    setAddModalOpen(true);
  };
  const handleClose = ()=>{
    setAddModalOpen(false)
  }
  <Box mt={4} position="fixed" bottom={10} right={10}>
    <Fab color="secondary" aria-label="Add" onClick={handleAddClick}>
      <AddIcon />
    </Fab>
  </Box>
  <AddItemModal isOpen={addModalOpen} handleClose={handleClose}/>
1 голос
/ 28 мая 2019

Я не уверен, правильно ли я понял, что вы пытаетесь сделать, но я вижу, что useEffect не использует состояние.Чтобы useEffect вызывался более одного раза, вам нужно передать ему состояние, поэтому ваш [props.isOpen] должен измениться на [open]

...