Question

我目前正在生成useEffect has a missing dependency警告，并且在理解如何更改逻辑以使其成语和“正确”方面遇到了困难。

首先，我有一个显示警报对话框的HOC。此HOC为包装的组件提供了一个道具，以显示带有消息的此警报对话框。这是HOC：

function withAlertDialog(WrappedComponent) {
  return function(props) {
    const [dialogOps, setDialogOps] = useState({open: false, message: "", // additional properties});

    const closeDialog = () => {
      setDialogOps({...dialogOps, open: false});
    }

    const openDialog = message => {
      setDialogOps({...dialogOps, open: true, message});
    }

    return (
      <React.Fragment>
        <WrappedComponent 
          {...props}
          onOpen={openDialog}
          onClose={closeDialog} />
        <MyDialogComponent
          open={dialogOps.open}
          message={dialogOps.message} />
      </React.Fragment>
    )
  }
}

我使用此HOC的原因是使包装的组件可以轻松显示对话框，而不必担心管理其状态。当有多个组件需要显示基本的警报对话框时，这确实很有帮助。精简了大量代码。

现在我正在尝试在组件中使用它。想法是，一旦检索到用户，我想进行api调用以检索该用户的一些数据。该效果仅应在用户更改后才运行，并且api调用应仅运行一次。此外，该用户来自redux。这是组件：

function MyComponent(props) {
  const user = useSelector(state => state.user); // New use selector hook from react-redux
  const {onOpen} = props;

  useEffect(() => {
    async function retrieveDataAsync() {
      let client = new MyClient(); // Some generic client
      try {
        let response = await client.getAsync(); // Some generate data retrieval function
        console.log(response.data);
      } catch (error) {
        onOpen(error.errorMessage);
      }
    }

  if (user) retrieveDataAsync();
  }, [user]);
}

export default withAlertDialog(MyComponent);

现在，我在控制台中收到错误消息，指出缺少依赖项onOpen。我如何以新的react hooks方式将其正确重组为“正确”？

我不想添加onOpen作为依赖项，因为其他原因，MyComponent会被父组件多次渲染，这意味着onOpen总是不同的从上一个开始，这意味着我的api调用应该只发生一次，现在每次重新渲染MyComponent时都会执行。

我尝试在useCallback函数上使用onOpen：

const openDialog = useCallback(message => {
  setDialogOps({...dialogOps, open: true, message});
}, [dialogOps]);

现在的问题是，dialogOps每次更改时，都会触发useEffect重新运行，因为功能已更改。

我现在很困，不确定如何解决这个问题。

不需要时使用useEffect依赖项会产生eslint警告

0 个答案: