如何在函数中使用自定义钩子?

时间:2019-09-08 23:56:05

标签: reactjs react-hooks

我试图在函数中使用我的钩子,但是它不起作用,所以现在我尝试发送一个回调函数来重置钩子参数,但是它仍然不起作用。

如何在我的情况下使用此自定义钩子?

const del = useFetch(null);
  const handleDelete = id => {
    del.setParams({
       hookUrl: "https://localhost:44354/api/car/" + id, 
       hookOptions: {}
    });

    console.log(del.response);
  };

该钩子对GETS来说工作正常,因为我没有其他想要做的行为,但是对于删除,我需要弹出一个模态,例如,我知道我可以直接使用提取,但只是出于好奇。

import React from "react";

const useFetch = (url, options) => {
  debugger;
  const [params, setParams] = React.useState({
    hookUrl: url,
    hookOptions: options
  });
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(params.hookUrl, params.hookOptions);
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, []);
  return { setParams, response, error };
};
export default useFetch;

1 个答案:

答案 0 :(得分:0)

  1. 不能在函数内部使用钩子。
  2. 您正在使用setParams(以错误的方式使用setState):
const handleDelete = id => {
    del.setParams({
       hookUrl: "https://localhost:44354/api/car/" + id, 
       hookOptions: {}
    });
    console.log(del.response);
  };