reactjs - react : Stop hook from being called every re-rendering?

Question

对 React 和 React 中的钩子(Hook)有些新意。我有一个调用通信 Hook 的组件，其中使用 AXIOS 调用 API，然后将 JSON 响应反馈给组件。我遇到的问题是组件连续六次调用 Hook ，其中四次当然返回未定义的数据，然后另外两次返回预期的 JSON(这两次都相同)。

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

我如何才能让 Hook 只按需调用一次而不是像现在这样调用多次？这是有问题的部分(不包括小部件中的其余代码，因为它不相关):

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 Hook 在挂载时以及请求的任何依赖项发生变化时(比如 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

在上面的例子中，如果 url 发生变化，抓取将在挂载时发生。