Question

我正在创建获取请求网络的自定义钩子。我想在单击表单提交按钮时调用自定义钩子，但是根据钩子规则，我无法做到这一点。如何实现这种情况？

此自定义钩子：

const useRequest = (url, method, dependencies, data = null) => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await request[method](url, data);
        setResponse(res);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    };
    fetchData();
  }, dependencies);
  return { response, error, loading };
};

Answer 1

将fetchData函数移出useEffect并导出：

const useRequest = (url, method, dependencies, data = null) => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await request[method](url, data);
        setResponse(res);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    };
  useEffect(() => {

    fetchData();
  }, dependencies);
  return { response, error, loading, fetchData };
};

比什么时候可以在代码中的任何地方调用它。

如何在表单提交按钮内调用自定义钩子？

1 个答案: