Javascript 无效的钩子调用。钩子只能在函数组件的主体内部调用。？

我正在努力解决这个问题。我想用useEffect（）替换componentDidMount（），结果出现了错误

const requestData = group => {
  useEffect(() => {
    fetch("http://localhost:4996/getTagsFromWebsite", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
        "Access-Control-Allow-Origin": "*",
      },
      body: JSON.stringify(group),
    })
      .then(response => {
        return response.json();
      })
      .then(data => {
        console.log("request data", data);
        // debugger;
        setTagsData(data);
      });

  }, []);
};

---

您可以直接在组件内部调用

useffect（）

，并设置

requestData

如下：

function App(){
const [requestData, setRequestData] = useState(null);
  useEffect(() => {
    fetch("http://localhost:4996/getTagsFromWebsite", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
        "Access-Control-Allow-Origin": "*",
      },
      body: JSON.stringify(group),
    })
      .then(response => {
        return setRequestData(response.json());
      })
      .then(data => {
        console.log("request data", data);
        // debugger;
        setTagsData(data);
      });

  }, []);
}

如果您希望这是一个钩子，请这样称呼它：

function useRequestData(route){
  const [requestData, setRequestData] = useState(null);
  const [tagsData, setTagsData] = useState(null);
  useEffect(() => {
    fetch(route, {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
        "Access-Control-Allow-Origin": "*",
      },
      body: JSON.stringify(group),
    })
      .then(response => {
        return setRequestData(response.json());
      })
      .then(data => {
        console.log("request data", data);
        // debugger;
        setTagsData(data);
      });
  }, []);
  // return [loading, data]
  return [!requestData, requestData, tagsData];
}

function App(){
  const [loading, data, err] =  
  useRequestData("http://localhost:4996/getTagsFromWebsite");
  return loading ? "loading..." : data.foobar;
}

---

希望这能有所帮助，

我猜您是在react组件中调用

requestData

？我遇到了同样的问题，您在react组件中调用的函数名必须以

use

开头，类似于

useRequestData

。这叫做定制挂钩。看，关于“谁的名字以‘use’开头”的部分