为什么不直接使用挂钩？

Question

React的新功能，并在React中挂上钩子。我有一个调用通信挂钩的组件，在其中使用AXIOS对API进行调用，然后将JSON响应反馈给该组件。我遇到的问题是该组件连续连续六次调用该钩子，其中四次当然会返回未定义的数据，然后又两次返回所需的JSON（这两次都是相同的）。

我做了一个快速的console.log来仔细检查它是否确实是多次调用钩子的组件，还是发生在钩子内部，并且是该组件。

我该如何处理仅在需要时才调用一次钩子，而不是多次调用？这是有问题的部分（由于无关紧要，不包括小部件中的其余代码）：

export default function TestWidget() {

//Fetch data from communicator
console.log("called");
const getJSONData = useCommunicatorAPI('https://jsonplaceholder.typicode.com/todos/1');

//Breakdown passed data
const {lastName, alertList, warningList} = getJSONData;

return (          
            <h1 id="welcomeTitle">Welcome {lastName}!</h1>

     );

}


export const useCommunicatorAPI = (requestAPI, requestData) => {

const [{ data, loading, error }, refetch] = useAxios('https://jsonplaceholder.typicode.com/todos/1', []);
console.log("data in Communicator:", data);

   return {data};
 }

Answer 1

我将使用useEffect钩子在挂载时以及请求的任何依赖项更改时（例如url更改）执行此操作。

这是您要查看的useEffect

这里可能是这样：

const [jsonData, setJsonData] = React.useState({})
const url = ...whatver the url is
React.useEffect(() => {
  const doFetch = async () => {
    const jsonData = await useAxios(url, []);;
    setJsonData(jsonData)
  }
  doFetch();
}, [url])
...use jsonData from the useState

在上面的示例中，如果网址发生更改，抓取将在安装时进行。

Answer 2

为什么不直接使用挂钩？

export default function TestWidget() {
 const [{ data, loading, error }, refetch] = 
useAxios('https://jsonplaceholder.typicode.com/todos/1', []);

  return (<h1 id="welcomeTitle">Welcome {lastName}!</h1>);
}

空数组[]在调用时使钩子触发一次

Answer 3

尝试使用异步/等待创建函数来获取数据。

您可以在此了解以下内容： https://javascript.info/async-await

反应：阻止钩子在每次重新渲染时被调用吗？

3 个答案:

为什么不直接使用挂钩？