React.js在尝试在Apollo useQuery的上下文中显示通知时出现重新渲染的问题

Question

所以这就是我要做的。我创建了一个带有reducer的全局通知上下文以更改状态。

我现在遇到的问题是，我正在使用Apollo钩子进行查询useQuery，当发生错误时，我想在全局通知中显示它。

因此，我需要分派给reducer来显示通知，更改通知中的标题和消息。

这将触发全局通知上下文的状态更改，该状态更改将触发重新渲染，并再次触发useQuery。如果您每次都有错误响应，那么所有这些都会触发无限重渲染。

有人建议建立一个适用于此的全球通知系统吗？

我剩下的唯一解决方案是在需要通知的每个页面上导入通知。

代码：

  const [state, dispatch] = useContext(NotificationsContext);
  const { loading, error, data } = useQuery(GET_USERS);

  useEffect(() => {
    console.log(error);

    if (error) {
      dispatch({
        type: 'ERROR',
        payload: {
          title: 'Query Error',
          subtitle: error.message,
        },
      });
    }

    if (!loading && data) {
      const newData = [];
      data.getUsers.users.forEach((user) => {
        const newUserRow = {};
        headers.forEach((header) => newUserRow[header] = user[header]);
        newData.push(newUserRow);
      });
      setRows(newData);
    }
  }, []);

Answer 1

我认为您正在使用功能组件，并且可以通过在useQuery挂钩内使用useEffect解决此问题，也不要忘记将空数组作为useEffect的第二个参数传递。

希望这可以解决您的问题。

https://medium.com/@felippenardi/how-to-do-componentdidmount-with-react-hooks-553ba39d1571