无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。？答案

【问题标题】：Invalid hook call. Hooks can only be called inside of the body of a function component.?无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。？
【发布时间】：2019-09-24 21:11:49
【问题描述】：

我正在努力解决这个问题。我想用 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);
      });

  }, []);
};

【问题讨论】：

我猜你是在 React 组件中调用 requestData 吗？我遇到了同样的问题，你在 react 组件中调用的函数名必须以 use 开头......类似于useRequestData。它被称为自定义钩子。参见docs，关于“谁的名字以'use'开头”的部分

标签： javascript reactjs

【解决方案1】：

你可以直接在你的组件中调用你的useEffect()，然后像这样设置你的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;
}

希望这会有所帮助，

【讨论】：