时间戳

首页 > 解决方案 > React Router 的 useParams 导致 useEffect 重新运行

reactjs - React Router 的 useParams 导致 useEffect 重新运行

问题描述

我正在使用react-router5.1 和react16.10。

对于 Master-Detail 页面，我使用useParams()从 url 获取 id 来打开当前组的页面。打开发生在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]);
}

如何在不违反“钩子规则”的情况下防止这种情况发生？

标签： reactjsreact-routerreact-hooks

解决方案

我有同样的问题，我解决的方法是将id从useParams传递给函数并仅在useEffect中设置id。

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

  useEffect(() => {
    getData(id);

    if (id !== undefined) {
      getGroup({ id });
    }
  }, [id]);

 ...
}

推荐阅读