React 如何用useEffect调用加载函数

我们将使用React的useEffect钩子来调用我们的加载函数。这个钩子允许我们指定一个函数，在特定的组件生命周期事件中运行，比如组件挂载时。通过传入我们的加载函数作为依赖关系，我们确保每当组件加载或更新时，它都会被调用。

React useEffect

useEffect是React的一个Hook，允许你将一个组件与外部系统同步。

它在组件渲染后运行，可以用来获取数据，更新DOM，或设置事件监听器。
它需要两个参数：一个包含效果逻辑的函数和一个依赖关系的列表。
如果有必要，效果函数应该返回一个清理函数。
useEffect类似于componentDidMount、componentDidUpdate和componentWillUnmount的组合。

方法

你可以用React的useEffect钩子调用一个加载函数，方法是在钩子的第二个参数中把它作为一个依赖关系传递。装载函数应该在useEffect的回调函数中被调用。

例子

import { useEffect } from 'react';
function MyComponent() {
   useEffect(() => {
      loadData();
   }, []); // Pass an empty array to only call the function once on mount.

   function loadData() {
      // Fetch data or perform other loading logic here
   }

   // ... component render logic
}

你也可以把变量作为依赖关系传递给loadData函数，这样当依赖关系发生变化时，loadData函数将被再次调用。

import { useEffect } from ‘react’;

function MyComponent({id}) {
   useEffect(() => {
      loadData(id);
   }, [id]); 

   function loadData(id) {
      // Fetch data or perform other loading logic here
   }

   // ... component render logic
}

值得注意的是，为了避免无限循环，任何由加载函数引起的状态更新都应该在一个单独的效果中完成。

最终代码

下面是一个使用useEffect钩子在React组件中加载数据的工作例子—-。

App.js

import React, { useEffect, useState } from 'react';
function MyComponent() {
   const [data, setData] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   useEffect(() => {
      async function fetchData() {
         setIsLoading(true);
         try {
            const response = await fetch('https://jsonplaceholder.typicode.com/users');
            const json = await response.json();
            setData(json);
         } catch (error) {
            console.error(error);
         } finally {
            setIsLoading(false);
         }
      }
      fetchData();
   }, []);
   if (isLoading) {
      return <div style={{ color: 'black' }}>Loading...</div>;
   }
   if (data) {
      return <div style={{ color: 'black' }}>{data.map(item => (<div key={item.id}>
         {item.name}
      </div>))}</div>;
   }
   return <div style={{ color: 'black' }}>No data</div>;
}
export default MyComponent;

在这个例子中，MyComponent组件使用useEffect钩子，在组件第一次渲染时从API加载数据：

这个钩子需要两个参数：一个是在组件渲染时运行的回调函数，另一个是决定何时运行该效果的依赖数组。
在这种情况下，我们传递一个空数组作为第二个参数，这告诉React在组件第一次渲染时只运行一次效果。
回调函数fetchData首先将isLoading状态设置为 “true”，这使得组件显示 “Loading… “信息。
然后，它使用fetch API从一个API加载数据，并等待响应完成。
然后，它解析响应中的JSON数据，并用解析后的数据设置数据状态。
如果发生错误，它将错误记录到控制台。最后，它将isLoading状态设置为false，这将导致组件显示加载的数据，如果API返回空或错误，则显示 “无数据 “的消息。
该组件根据当前的状态渲染不同的信息。当数据正在被获取时，显示 “Loading…”；当数据被加载时，显示数据本身；如果API返回空或错误，则显示 “No data”。
注意，这个例子使用async/await来处理由fetch API返回的承诺，如果你使用旧版本的javascript，你可以使用then()和.catch()方法。