React Router useParams вызывает повторный запуск useEffect - PullRequest
Новая
       14

React Router useParams вызывает повторный запуск useEffect

0 голосов
/ 04 октября 2019

Я использую react-router 5.1 и react 16.10.

Для страницы Master-Detail я использую useParams(), чтобы получить идентификатор из URL, чтобы открыть страницу для текущей группы,Открытие происходит в useEffect(). В результате, id должен быть указан как зависимость в этом эффекте. Однако при создании новой группы, когда данных достаточно для того, чтобы группа была действительной, API отправляет id для этой группы и устанавливает URL-адрес на /group/:id. В результате, однако, эффект запускается снова. 

function Groups(props) {
  const { id } = useParams();
  const history = useHistory();

  const [group, setGroup] = useState(NEW_GROUP);

  const getData = useCallback(async () => {
    await Promise.resolve(Api.getGroups());
  }, []);

  const getGroup = useCallback(async group => {
    history.push(`/groups/${group.id}`);

    await Promise.resolve(Api.getGroup(group)).then(data => {
      setGroup(data.group);
    });
  }, [getData, history]);

  useEffect(() => {
    getData();

    if (id !== undefined) {
      getGroup({ id });
    }
  }, [props.actions, id, getData, getGroup]);

  // Saving data
  const saveGroup = useCallback(async () => {
    setSaved(SAVING);

    await Promise.resolve(Api.storeGroup(group)).then(data => {
        if (!group.hasOwnProperty('id')) {
            history.push(`/groups/${data.id}`);
            setGroup(prevGroup => ({ ...prevGroup, id: data.id }));
        }

        getData();
        setSaved(SAVED);
    }).catch(() => setSaved(FAILED));
  }, [getData, group, history]);
}

Как я могу предотвратить это, не нарушая "правил хуков"?

...