javascript - 在 react 中从按钮事件调用钩子(Hook)的方法

Question

这是我第一次开发 React 应用程序。我打算在用户单击按钮时进行 Api 调用。是否可以直接从事件中调用 Hook ？如果是，如果钩子(Hook)来自不同的组件，我该如何调用它？

这是按钮(不同的组件)

 const paginationButtons = (
    <React.Fragment>
      <Button onClick={() => viewDetails()}>View Details</Button>
    </React.Fragment>
  );

function viewDetails() {
   //Is it Possible to call fetch data.js and pass the url from here?
  }

这是获取 data.js 的钩子(Hook)

import axios from 'axios';
import PropTypes from 'prop-types';
import { useState, useEffect} from 'react';

const propTypes = {
  initialUrl: PropTypes.string.isRequired,
  initialParams: PropTypes.object
}

export const useFetchData = props => {
  PropTypes.checkPropTypes(propTypes, props, 'property', 'useFetchData');

  const { initialUrl, initialParams } = props;

  const [request, setRequest] = useState({
    url: initialUrl,
    params: initialParams
  });
  const [loading, setIsLoading] = useState(false);
  const [error, setError] = useState();
  const [data, setData] = useState([]);

  useEffect(() => {
    const {url, params} = request;

    const fetchData = async () => {
      setIsLoading(true);
      try {
        const result = await axios(url, {params: {...params}});
        setIsLoading(false);
        setData(result.data);
      } catch(err) {
        setIsLoading(false);
        setError(err);
      }
    }

    fetchData();
  }, [request]);

  const doFetch = (params) => {
    setRequest({url: request.url, params: params});
  };
  return {loading, error, data, doFetch};
}

非常感谢您的帮助。

Answer 1

您打算做的事情是可能的，但在我看来，它不应该在现实世界的应用程序中完成。原因如下。

首先，让我们考虑一下为什么要使用钩子(Hook)。 React 函数组件无法在重新呈现之间保留本地状态 和处理生命周期事件。这就是引入钩子(Hook)的原因。

在使用钩子(Hook)之前，我会问自己，“我需要处理组件状态还是组件生命周期？”。否则，使用钩子(Hook)要么矫枉过正，要么反模式。

在您的示例中，让我们考虑您可能尝试使用 viewDetails 函数做什么。很明显，你想执行 fetch 调用，但之后你打算做什么？让我们看看一些可能性...

1. 命令式更新 dom:除非有非常具体的原因，否则您不应该执行命令式操作。假设您想要显示警报，那么您当然可以调用命令式 API(例如 notie.js 或 sweet-alert)。
2. 响应式更新 dom:这是我认为最常见的场景。在这种情况下，您应该调用一些 setState 函数，或者触发一个事件以由另一个组件捕获。在任何一种情况下，使用 Hook 来获取数据都是没有用的。

因此，与其尝试调用像 useFetchData 这样的钩子(Hook)，不如调用像 doFetchData 这样的函数。

我并不是建议您摆脱 useFetchData Hook 。只是，它们有不同的用途。将 Hook 用于应该在加载时发生的任何获取操作而不是作为对用户操作的响应是有意义的。

---

既然我已经给出了我的意见，下面是一种可以根据用户操作触发 Hook 的方法。

// Here we are using a shouldFetch flag to conditionally call a function
function useFetch(url, options, shouldFetch, setShouldFetch) {
    const [state, setState] = useState({});
    useEffect(() => {
        if (shouldFetch) {
            doFetch(url, options)
                // set the fetch result to local state
                .then(data => {
                   setState(data)
                   setShouldFetch(false) // avoid infinite calls
                }) 
        }
    });

    return [state]; // You can maybe add fetch status as well
}

现在你可以这样使用了，

function MyComponent() {
    const [shouldFetch, setShouldFetch] = useState(false);
    const [fetchData] = useFetch('url', {}, shouldFetch, setShouldFetch);

    return (
        <Button onClick={() => {setShouldFetch(true)}}>Click Me</Button>
    )
}

但实际上，您不应该以这种方式使用钩子(Hook)。常规的 doFetchData 调用是可行的方法。如果需要，调用一些 setState 函数来保留获取的数据。